add mode toggle

src/app/layout.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { ComponentProps } from "react";
 import { Send } from "lucide-react";
 import Navlinks from "./ui/navLinks";
+import { ModeToggle } from "./ui/modeToggle";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -32,14 +33,14 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div id="layout-container" className="p-4 w-screen mt-6 flex justify-center">
+          <div id="layout-container" className="p-4 w-screen h-screen mt-6 flex justify-center">
             <div className="grid grid-cols-12 w-5/6">
-              <div id="sidebar" className="col-start-1 col-end-3">
-                <header className="">
-                  <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2">SubMan</h1>
-                  <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
-                </header>
+              <div id="sidebar" className="col-start-1 col-end-3 h-5/6 flex flex-col"> <header className="">
+                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2">SubMan</h1>
+                <p className="mt-2 mx-1 text-sm antialiased">The self-hosted literary submission tracker.</p>
+              </header>
                 <Navlinks className="mt-6" />
+                <footer className="mt-auto"><ModeToggle /></footer>
               </div>
               <div className="col-start-3 col-span-full">
                 {children}

src/app/ui/modeToggle.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+