chore: improve dashboard header

eight-labs · Feb 21, 2024 · 2f55f06 · 2f55f06
1 parent 46fe452
commit 2f55f06
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/src/app/(landing)/_components/header.tsx b/src/app/(landing)/_components/header.tsx
@@ -17,7 +17,7 @@ export const Header = ({ user }: LandingHeaderProps) => {
   const isLoggedIn = user !== null;
 
   return (
-    <header className="px-2 py-4 lg:py-6">
+    <header className="py-4">
       <div className="container flex items-center gap-2 p-0">
         <Link
           className="text flex items-center justify-center font-medium"

diff --git a/src/app/(main)/_components/header.tsx b/src/app/(main)/_components/header.tsx
@@ -1,20 +1,36 @@
 import Link from "next/link";
 import { type User } from "lucia";
 import { UserDropdown } from "~/app/(main)/_components/user-dropdown";
-import { DashboardIcon } from "@radix-ui/react-icons";
+import { FunctionSquare } from "lucide-react";
+import { APP_TITLE } from "@/lib/constants";
+
+const routes = [{ name: "Dashboard", href: "/dashboard" }] as const;
 
 export const Header = ({ user }: { user: User }) => {
+  const isLoggedIn = user !== null;
+
   return (
-    <header className="sticky top-0 border-b bg-background/80 p-2">
+    <header className="sticky top-0 border-b bg-background/80 py-2">
       <div className="container flex items-center gap-2 px-2 py-2 lg:px-4">
         <Link
-          className="flex items-center justify-center text-lg font-medium"
-          href="/"
+          className="text flex items-center justify-center font-medium"
+          href={isLoggedIn ? "/dashboard" : "/"}
         >
-          <DashboardIcon className="mr-2 h-5 w-5" />
-          Dashboard
+          <FunctionSquare className="mr-2 h-5 w-5" /> {APP_TITLE}
         </Link>
 
+        <nav className="ml-8 hidden gap-4 sm:gap-6 md:flex">
+          {routes.map(({ name, href }) => (
+            <Link
+              key={name}
+              className="text-sm font-medium text-muted-foreground/70 transition-colors hover:text-muted-foreground"
+              href={href}
+            >
+              {name}
+            </Link>
+          ))}
+        </nav>
+
         <UserDropdown
           email={user.email}
           avatar={user.avatar}

diff --git a/src/app/(main)/_components/user-dropdown.tsx b/src/app/(main)/_components/user-dropdown.tsx
@@ -42,7 +42,7 @@ export const UserDropdown = ({
   avatar?: string | null;
   className?: string;
 }) => {
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
     default: APP_TITLE,
     template: `%s | ${APP_TITLE}`,
   },
-  description: "Acme - Simple auth with lucia and trpc",
+  description: "Manage forms with ease",
   icons: [{ rel: "icon", url: "/icon.png" }],
 };