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

src/app/_providers/ThemeProvider.tsx

@@ -0,0 +1,23 @@
+'use client'
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export default function ThemeProvider({children}:{children: React.ReactNode}) {
+  const [mounted,setMounted] = React.useState(false)
+  React.useEffect(() => {
+    setMounted(true)
+  })
+  if (mounted) {
+    return (
+      <NextThemesProvider attribute="class" defaultTheme="dark">
+        {children}
+       </NextThemesProvider>
+     )
+  } else {
+    return (
+      <>
+        {children}
+      </>
+    )
+  }
+}

src/app/admin/page.tsx

@@ -3,7 +3,7 @@ import { SignedIn } from "@clerk/nextjs";
 export default function AdminPage() {
   return (
     <SignedIn>
-  		<main className="flex min-h-screen flex-col items-center justify-center bg-black text-white">
+  		<main className="flex min-h-screen flex-col items-center justify-center">
   			<div>
   				hello admin
   			</div>

src/app/cv/_components/CvCategory.tsx

@@ -3,15 +3,18 @@ import { trpc } from "~/app/_trpc/Client"
 import CvEntry, { type CvEntryProps } from "./CvEntry"
 import type { servTrpc } from "~/app/_trpc/ServerClient"
 type CvCategoryProps = {
-  initialData: Awaited<ReturnType<typeof servTrpc.cvCategory.get>>,
+  initialData: Awaited<ReturnType<typeof servTrpc.cv.category.list>>,
   children?: React.ReactElement<CvEntryProps>
 } 
 export default function CvCategory(props:CvCategoryProps)  {
-  const cvCategories = trpc.cvCategory.get.useQuery(undefined,{
+  const cvCategories = trpc.cv.category.list.useQuery(undefined,{
   	initialData: props.initialData,
-  	refetchOnMount: false,
-  	refetchOnReconnect: false,
+  	// refetchOnMount: false,
+  	// refetchOnReconnect: false,
   });
+  if (cvCategories.isPending) {
+  	return (<div> Loading ... </div>);
+  }
 	return (
 		<div>
 			{cvCategories.data.map((cat) => {

src/app/cv/page.tsx

@@ -1,7 +1,7 @@
 import { servTrpc } from "~/app/_trpc/ServerClient"
 import CvCategory from "./_components/CvCategory";
 export default async function CvPage() {
-  const cvCategories = await servTrpc.cvCategory.get();
+  const cvCategories = await servTrpc.cv.category.list();
   return (
     <CvCategory initialData={cvCategories}>
       <></>

src/app/layout.tsx

@@ -6,6 +6,9 @@ import { config } from "@fortawesome/fontawesome-svg-core"
 import "@fortawesome/fontawesome-svg-core/styles.css"
 import TopNav from "./_components/TopNav";
 import TrpcProvider from "./_trpc/TrpcProvider";
+import dynamic from "next/dynamic";
+const ThemeProvider = dynamic(() => import("./_providers/ThemeProvider"),{ssr:true})
+
 config.autoAddCss = false;
 export const metadata: Metadata = {
 	title: "Gregor Lohaus",
@@ -26,13 +29,15 @@ export default function RootLayout({
 	return (
 		<ClerkProvider>
 			<TrpcProvider>
-				<html lang="en" className={`${geist.variable}`}>
-					<body className="flex flex-col gap-2 bg-black text-white">
-						<TopNav/>
-						{children}
-						{modal}
-					</body>
-				</html>
+				<ThemeProvider>
+					<html lang="en" className={`${geist.variable}`} suppressHydrationWarning>
+						<body className="flex flex-col bg-background text-foreground">
+							<TopNav />
+							{children}
+							{modal}
+						</body>
+					</html>
+				</ThemeProvider>
 			</TrpcProvider>
 		</ClerkProvider>
 	);

src/app/page.tsx

@@ -1,6 +1,6 @@
 export default function HomePage() {
 	return (
-		<main className="flex min-h-screen flex-col items-center justify-center bg-black text-white">
+		<main>
 			<div>
 				hello world
 			</div>