responsive navbar

src/app/_components/ThemeIcon.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { Moon, Sun } from "lucide-react"
+import { useEffect } from "react"
+type Props = {activeTheme:string|undefined}
+const ThemeIcon = (props:Props) => {
+  if (props.activeTheme == "dark") {
+    return (<Sun/>)
+  } else {
+    return (<Moon/>)
+  }
+}
+export default ThemeIcon;

src/app/_components/ThemeSwitch.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { Button } from "~/components/ui/button"
+import ThemeIcon from "./ThemeIcon"
+
+export function ThemeSwitch() {
+  const { setTheme, theme } = useTheme()
+  const toggleTheme = () => {
+    setTheme(theme == "dark" ? "light" : "dark")
+  }
+  return (
+    <>
+      <Button className="flex h-9 lg:h-full w-20 lg:w-12" variant="outline" size="icon" onClick={toggleTheme}>
+        <ThemeIcon activeTheme={theme}/>
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    </>
+  )
+}

src/app/_components/TopNav.tsx

@@ -1,25 +1,57 @@
 import Link from "next/link"
 import AdminWrap from "./AdminWrap"
-import { SignedIn, SignedOut, SignUpButton, UserButton } from "@clerk/nextjs"
+import { SignedIn, SignedOut, SignInButton, SignOutButton, SignUpButton, UserButton } from "@clerk/nextjs"
+import { Button } from "~/components/ui/button"
+import { ThemeSwitch } from "./ThemeSwitch"
 
 export default function TopNav() {
 	return (
-		<nav className="flex flex-wrap items-center w-full border-b px-5 py-5 gap-5 bg-black text-white border-white">
-			<Link className="h-fit" href={"/blog"}> Blog </Link>
-			<Link className="h-fit" href={"/cv"}> CV </Link>
-			<Link className="h-fit" href={"/projects"}> Projects </Link>
-			<Link className="h-fit" href={"/fun"}> Fun </Link>
-			<div className="ml-auto"/>
-			<AdminWrap><Link className="h-fit" href={"/admin"}> Admin </Link></AdminWrap>
-			<div className="h-fit flex">
-				<SignedIn>
-					<UserButton/>
-				</SignedIn>
-				<SignedOut>
-					<SignUpButton/>
-				</SignedOut>
-			</div>
-		</nav>
+		<div className="absolute right-0 lg:relative">
+			<nav className="flex flex-col-reverse lg:flex-row flex-wrap w-20 lg:w-full outline-1 lg:h-10 h-full">
+				<div className="flex flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row">
+					<Button className="flex h-fit lg:h-full w-full lg:w-20" asChild variant="outline">
+						<Link href={"/blog"}> Blog </Link>
+					</Button>
+					<Button asChild className="flex h-full w-full lg:w-20" variant="outline">
+						<Link href={"/cv"}> CV </Link>
+					</Button>
+					<Button asChild className="flex h-full w-full lg:w-20" variant="outline">
+						<Link href={"/projects"}> Projects </Link>
+					</Button>
+					<Button asChild className="flex h-full w-full lg:w-20" variant="outline">
+						<Link href={"/fun"}> Fun </Link>
+					</Button>
+				</div>
+				<div className="flex flex-col-reverse flex-wrap lg:h-full w-20 lg:w-fit lg:flex-row lg:ml-auto">
+					<AdminWrap>
+						<Button className="flex h-full w-full lg:w-20" variant="outline">
+							<Link className="" href={"/admin"}> Admin </Link>
+						</Button>
+					</AdminWrap>
+					<SignedIn>
+						<Button asChild className="flex h-full w-full lg:w-20" variant={"outline"}>
+							<SignOutButton />
+						</Button>
+					</SignedIn>
+					<SignedOut>
+						<Button asChild className="flex h-full cursor-pointer lg:w-20" variant={"outline"}>
+							<SignInButton mode="modal" />
+						</Button>
+						<Button asChild className="flex h-full cursor-pointer lg:w-20" variant={"outline"}>
+							<SignUpButton mode="modal" />
+						</Button>
+					</SignedOut>
+					<ThemeSwitch />
+					<SignedIn>
+						<Button asChild className="flex h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
+							<div>
+							<UserButton />
+							</div>
+						</Button>
+					</SignedIn>
+				</div>
+			</nav>
+		</div>
 	)
 }