Make Header Stick to Top

njfdev · Aug 17, 2024 · d8cc0a3 · d8cc0a3
1 parent de42080
commit d8cc0a3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { ModeToggle } from "@/components/ModeToggle";
 import { NavigationBar } from "@/components/NavigationBar";
 import { Badge } from "@/components/ui/badge";
+import TopBar from "@/components/TopBar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -27,12 +28,8 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div className="p-4">
-            <ModeToggle />
-            <Badge className="absolute m-2">API v0</Badge>
-            <NavigationBar />
-            {children}
-          </div>
+          <TopBar />
+          <div className="p-4 pt-12">{children}</div>
         </ThemeProvider>
       </body>
     </html>

diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
@@ -17,7 +17,7 @@ export function ModeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild className=" absolute right-4 top-4">
+      <DropdownMenuTrigger asChild className="justify-self-end">
         <Button variant="outline" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx
@@ -12,8 +12,8 @@ import { ReactNode } from "react";
 
 export function NavigationBar() {
   return (
-    <NavigationMenu className="mx-auto">
-      <NavigationMenuList>
+    <NavigationMenu className="absolute">
+      <NavigationMenuList className="w-screen flex items-center justify-center align-middle">
         <NavigationMenuItem>
           <NextNavigationLink href="/">Home</NextNavigationLink>
         </NavigationMenuItem>

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
@@ -0,0 +1,13 @@
+import { ModeToggle } from "./ModeToggle";
+import { NavigationBar } from "./NavigationBar";
+import { Badge } from "./ui/badge";
+
+export default function TopBar() {
+  return (
+    <div className="fixed w-screen grid items-center grid-cols-[auto_1fr_auto] p-4 z-50">
+      <Badge className="h-max">API v0</Badge>
+      <NavigationBar />
+      <ModeToggle />
+    </div>
+  );
+}