58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
"use client"
|
|
import Link from "next/link"
|
|
import AdminWrap from "./AdminWrap"
|
|
import { ClerkLoaded, Show, SignInButton, SignOutButton, SignUpButton, UserButton } from "@clerk/nextjs"
|
|
import { Button } from "~/components/ui/button"
|
|
import { ThemeSwitch } from "./ThemeSwitch"
|
|
|
|
export default function TopNav() {
|
|
return (
|
|
<div className="fixed lg:w-full right-0 z-50 lg:bg-background">
|
|
<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-10 lg:h-full w-full lg:w-20" asChild variant="outline">
|
|
<Link href={"/blog"}> Blog </Link>
|
|
</Button>
|
|
<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
|
|
<Link href={"/cv"}> CV </Link>
|
|
</Button>
|
|
<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant="outline">
|
|
<Link href={"/projects"}> Projects </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-10 lg:h-full w-full lg:w-20" variant="outline">
|
|
<Link className="" href={"/admin"}> Admin </Link>
|
|
</Button>
|
|
</AdminWrap>
|
|
<Show when="signed-in">
|
|
<Button asChild className="flex h-10 lg:h-full w-full lg:w-20" variant={"outline"}>
|
|
<SignOutButton />
|
|
</Button>
|
|
</Show>
|
|
<Show when="signed-out">
|
|
<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20" variant={"outline"}>
|
|
<SignInButton mode="modal" />
|
|
</Button>
|
|
<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20" variant={"outline"}>
|
|
<SignUpButton mode="modal" />
|
|
</Button>
|
|
</Show>
|
|
<ThemeSwitch />
|
|
<ClerkLoaded>
|
|
<Show when="signed-in">
|
|
<Button asChild className="flex h-10 lg:h-full cursor-pointer lg:w-20 content-center" variant={"outline"}>
|
|
<div>
|
|
<UserButton />
|
|
</div>
|
|
</Button>
|
|
</Show>
|
|
</ClerkLoaded>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|