Updated layout

src/app/(main)/layout.tsx

@@ -1,3 +1,4 @@
+import { ThemeSwitcher } from "@/components/theme-switcher"
 import { Button } from "@/components/ui/button"
 import { Settings } from "lucide-react"
 import Link from "next/link"
@@ -6,15 +7,20 @@ import { ReactNode } from "react"
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <>
-            <nav className="flex items-center justify-between px-6 py-4 border-b">
-                <Link href="/">
-                    <span className="font-semibold text-lg">Hypixel Stats</span>
-                </Link>
-                <Button variant="ghost" size="icon" aria-label="Settings">
-                    <Settings className="h-5 w-5" />
-                </Button>
-            </nav>
-            <div>
+            <header className="fixed w-screen bg-background/50 backdrop-blur-sm">
+                <nav className="flex justify-between items-center px-6 border-b h-header">
+                    <Link href="/">
+                        <span className="text-lg font-semibold">Hypixel Stats</span>
+                    </Link>
+                    <div className="flex items-center">
+                        <ThemeSwitcher />
+                        <Button variant="ghost" size="icon" aria-label="Settings">
+                            <Settings className="w-5 h-5" />
+                        </Button>
+                    </div>
+                </nav>
+            </header>
+            <div className="pt-header">
                 {children}
             </div>
         </>

src/app/(stats)/layout.tsx

@@ -1,4 +1,5 @@
 import { SearchBar } from "@/components/search-bar"
+import { ThemeSwitcher } from "@/components/theme-switcher"
 import { Button } from "@/components/ui/button"
 import { Settings } from "lucide-react"
 import Link from "next/link"
@@ -13,12 +14,15 @@ export default function StatsLayout({ children }: Readonly<{ children: ReactNode
                         <span className="text-lg font-semibold">Hypixel Stats</span>
                     </Link>
                     <SearchBar navbar />
-                    <Button variant="ghost" size="icon" aria-label="Settings">
-                        <Settings className="w-5 h-5" />
-                    </Button>
+                    <div className="flex items-center">
+                        <ThemeSwitcher />
+                        <Button variant="ghost" size="icon" aria-label="Settings">
+                            <Settings className="w-5 h-5" />
+                        </Button>
+                    </div>
                 </nav>
             </header>
-            <div className="pt-header">
+            <div className="pt-header min-h-content">
                 {children}
             </div>
         </>

src/app/(stats)/player/[ign]/_stats/bedwars/bedwars.tsx

@@ -6,7 +6,7 @@ import { Separator } from "@/components/ui/separator"
 import { getBWLevelForExp, getTotalExpForLevel } from "@/lib/hypixel/bedwarsLevel"
 import { getProgress } from "@/lib/hypixel/general"
 import { Player } from "@/lib/schema/player"
-import { ChevronDown, ChevronUp, Menu } from "lucide-react"
+import { ChevronDown, ChevronUp } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
 import CollapsedStats from "../../_components/CollapsedStats"
 import { BedwarsLevel, BedwarsProgress } from "./bedwars-components"
@@ -56,7 +56,7 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
             <CardContent>
                 <Collapsible ref={ref}>
                     <div className="flex justify-between">
-                        <h1 className="text-xl font-bold">Bedwars</h1>
+                        <h1 className="text-xl font-bold">BedWars</h1>
                         <div className="flex gap-4">
                             <CollapsedStats
                                 stats={[
@@ -87,12 +87,9 @@ export default function BedwarsStats({ stats }: { stats: Player["player"]["stats
                                 ]}
                             />
                         </div>
-                        <div className="flex gap-2 items-center">
-                            <CollapsibleTrigger className="transition-all">
-                                {opened === false ? <ChevronDown /> : <ChevronUp />}
-                            </CollapsibleTrigger>
-                            <Menu />
-                        </div>
+                        <CollapsibleTrigger className="transition-all">
+                            {opened === false ? <ChevronDown /> : <ChevronUp />}
+                        </CollapsibleTrigger>
                     </div>
                     <CollapsibleContent>
                         <Separator className="my-4" />

src/app/(stats)/player/[ign]/page.tsx

@@ -54,7 +54,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
     const level = getExactLevel(player.networkExp)
 
     return (
-        <div className="flex flex-col items-center min-h-screen">
+        <div className="flex flex-col items-center">
             <h1 className="text-3xl font-bold mt-25">
                 <DisplayName
                     ign={player.displayname}
@@ -71,7 +71,7 @@ async function SuspendedPage({ ign: pign }: { ign: string }) {
             </h1>
             <div className="flex gap-6 px-6 mt-8 w-full max-w-7xl">
                 <Sidebar level={level} ign={pign} player={player} guild={guild ?? undefined} />
-                <div className="w-3/4">
+                <div className="space-y-4 w-3/4">
                     <BedwarsStats stats={player.stats.Bedwars} />
                 </div>
             </div>

src/app/layout.tsx

@@ -1,13 +1,16 @@
 import { ReactNode } from "react"
 import "./globals.css"
+import ThemeProvider from "@/components/ThemeProvider"
 import { Toaster } from "@/components/ui/sonner"
 
 export default function RootLayout({ children }: Readonly<{ children: ReactNode }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className="antialiased dark">
-                {children}
-                <Toaster />
+            <body className="antialiased">
+                <ThemeProvider>
+                    {children}
+                    <Toaster />
+                </ThemeProvider>
             </body>
         </html>
     )