remove unused import

src/@/components/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground",
+          "border-transparent bg-accent text-accent-foreground",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:

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/forms/story.tsx

@@ -22,7 +22,6 @@ import {
 } from "@/components/ui/popover"
 import GenresTrigger from "./genresTrigger"
 import GenreCheckbox from "./genreCheckbox"
-import { Badge } from "@/components/ui/badge"
 import { useRef, useImperativeHandle } from "react"
 
 const formSchema = z.object({

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>
+  )
+}
+

src/app/ui/navLinks.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { ComponentProps } from "react";
 import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
 
 
 function NavLink(props: ComponentProps<"div"> & { href: string }) {
@@ -22,12 +23,12 @@ export default function Navlinks(props: ComponentProps<"div">) {
       <div className="text-secondary-foreground" >
         {
           links.map(e => (<NavLink key={e.link} href={e.link}
-            className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
+            className={twMerge(clsx("text-xl drop-shadow  font-black my-2 w-full pl-2 antialiased text-secondary-foreground bg-secondary",
               {
-                "text-primary-foreground bg-primary": pathname === e.link
+                "text-primary-foreground bg-primary": pathname.includes(e.link)
               }
-            )}
-          >{e.label}</NavLink >))
+            ))}
+          ><p className="drop-shadow-sm">{e.label}</p></NavLink >))
         }
       </ div>
     </div>