wip: refresh design

apps/web/src/components/(dashboard)/layout/desktop-nav.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
+  const pathname = usePathname();
+
+  return (
+    <div className={cn('ml-8 hidden flex-1 gap-x-6 md:flex', className)} {...props}>
+      <Link
+        href="/dashboard"
+        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
+          'text-primary-foreground': pathname?.startsWith('/dashboard'),
+        })}
+      >
+        Dashboard
+      </Link>
+      <Link
+        href="/documents"
+        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
+          'text-primary-foreground': pathname?.startsWith('/documents'),
+        })}
+      >
+        Documents
+      </Link>
+      {/* <Link
+        href="/settings/profile"
+        className={cn('font-medium leading-5 text-[#A1A1AA] hover:opacity-80', {
+          'text-primary-foreground': pathname?.startsWith('/settings'),
+        })}
+      >
+        Settings
+      </Link> */}
+    </div>
+  );
+};

apps/web/src/components/(dashboard)/layout/header.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { HTMLAttributes } from 'react';
+
+import Link from 'next/link';
+
+import { Menu } from 'lucide-react';
+
+import { User } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+import { Logo } from '~/components/branding/logo';
+
+import { DesktopNav } from './desktop-nav';
+import { ProfileDropdown } from './profile-dropdown';
+
+export type HeaderProps = HTMLAttributes<HTMLDivElement> & {
+  user: User;
+};
+
+export const Header = ({ className, user, ...props }: HeaderProps) => {
+  return (
+    <header
+      className={cn(
+        'supports-backdrop-blur:bg-background/60 bg-background/95 sticky top-0 z-40 flex h-16 w-full items-center border-b backdrop-blur',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between gap-x-4 px-4 md:justify-normal md:px-8">
+        <Link href="/">
+          <Logo className="h-6 w-auto" />
+        </Link>
+
+        <DesktopNav />
+
+        <div className="flex gap-x-4">
+          <ProfileDropdown user={user} />
+
+          <Button variant="outline" size="sm" className="h-10 w-10 p-0.5 md:hidden">
+            <Menu className="h-6 w-6" />
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};

apps/web/src/components/(dashboard)/layout/profile-dropdown.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import Link from 'next/link';
+
+import { CreditCard, Github, Key, LogOut, User as LucideUser } from 'lucide-react';
+import { signOut } from 'next-auth/react';
+
+import { IS_SUBSCRIPTIONS_ENABLED } from '@documenso/lib/constants/features';
+import { User } from '@documenso/prisma/client';
+import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
+import { Button } from '@documenso/ui/primitives/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@documenso/ui/primitives/dropdown-menu';
+
+export type ProfileDropdownProps = {
+  user: User;
+};
+
+export const ProfileDropdown = ({ user }: ProfileDropdownProps) => {
+  const initials =
+    user.name
+      ?.split(' ')
+      .map((name) => name.slice(0, 1).toUpperCase())
+      .slice(0, 2)
+      .join('') ?? 'UK';
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
+          <Avatar className="h-10 w-10">
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="w-56" align="end" forceMount>
+        <DropdownMenuLabel>Account</DropdownMenuLabel>
+
+        <DropdownMenuItem asChild>
+          <Link href="/settings/profile" className="cursor-pointer">
+            <LucideUser className="mr-2 h-4 w-4" />
+            Profile
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem asChild>
+          <Link href="/settings/password" className="cursor-pointer">
+            <Key className="mr-2 h-4 w-4" />
+            Password
+          </Link>
+        </DropdownMenuItem>
+
+        {IS_SUBSCRIPTIONS_ENABLED && (
+          <DropdownMenuItem asChild>
+            <Link href="/settings/billing" className="cursor-pointer">
+              <CreditCard className="mr-2 h-4 w-4" />
+              Billing
+            </Link>
+          </DropdownMenuItem>
+        )}
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem asChild>
+          <Link href="https://github.com/documenso/documenso" className="cursor-pointer">
+            <Github className="mr-2 h-4 w-4" />
+            Star on Github
+          </Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuItem
+          onSelect={() =>
+            signOut({
+              callbackUrl: '/',
+            })
+          }
+        >
+          <LogOut className="mr-2 h-4 w-4" />
+          Sign Out
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};