Add marketing page and layout changes

apps/web/src/app/(dashboard)/dashboard/page.tsx

@@ -1,5 +1,29 @@
-import type { Metadata } from "next";
+import Link from "next/link";
+import {
+  Bell,
+  CircleUser,
+  Home,
+  LineChart,
+  Menu,
+  Package,
+  Package2,
+  Search,
+  ShoppingCart,
+  Users,
+} from "lucide-react";
+import { Button } from "@unsend/ui/src/button";
 
-export default async function DashboardPage() {
-  return <div>Hello world</div>;
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@unsend/ui/src/dropdown-menu";
+import { Input } from "@unsend/ui/src/input";
+import { Sheet, SheetContent, SheetTrigger } from "@unsend/ui/src/sheet";
+
+export default function Dashboard() {
+  return <div>Hello</div>;
 }

apps/web/src/app/(dashboard)/layout.tsx

@@ -1,7 +1,39 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import {
+  Bell,
+  CircleUser,
+  Globe,
+  Home,
+  KeyRound,
+  LayoutDashboard,
+  LineChart,
+  Mail,
+  Menu,
+  Package,
+  Package2,
+  Search,
+  ShoppingCart,
+  Users,
+} from "lucide-react";
+import { Button } from "@unsend/ui/src/button";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@unsend/ui/src/dropdown-menu";
+import { Input } from "@unsend/ui/src/input";
+import { Sheet, SheetContent, SheetTrigger } from "@unsend/ui/src/sheet";
+
 import { NextAuthProvider } from "~/providers/next-auth";
 import { getServerAuthSession } from "~/server/auth";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { NavButton } from "./nav-button";
 
 export const metadata = {
   title: "Unsend",
@@ -22,19 +54,131 @@ export default async function AuthenticatedDashboardLayout({
 
   return (
     <NextAuthProvider session={session}>
-      <div className="h-screen flex">
-        <nav className="w-[200px] border border-r p-4">
-          <div className=" font-semibold text-xl">Unsend</div>
+      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+        <div className="hidden  bg-muted/20 md:block">
+          <div className="flex h-full max-h-screen flex-col gap-2">
+            <div className="flex h-14 items-center px-4 lg:h-[60px] lg:px-6">
+              <Link href="/" className="flex items-center gap-2 font-semibold">
+                <Image
+                  src="/unsend_white_new.png"
+                  alt="Unsend"
+                  width={25}
+                  height={25}
+                />
+                <span className=" ">Unsend</span>
+              </Link>
+            </div>
+            <div className="flex-1">
+              <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+                <NavButton href="/dashboard">
+                  <LayoutDashboard className="h-4 w-4" />
+                  Dashboard
+                </NavButton>
 
-          <div className="flex flex-col gap-3 mt-10">
-            <Link href="/dashboard">Dashboard</Link>
-            <Link href="/domains">Domains</Link>
-            <Link href="/emails">Emails</Link>
-            <Link href="/api-keys">API Keys</Link>
+                <NavButton href="/emails">
+                  <Mail className="h-4 w-4" />
+                  Emails
+                </NavButton>
+
+                <NavButton href="/domains">
+                  <Globe className="h-4 w-4" />
+                  Domains
+                </NavButton>
+
+                <NavButton href="/api-keys">
+                  <KeyRound className="h-4 w-4" />
+                  API keys
+                </NavButton>
+              </nav>
+            </div>
+            <div className="mt-auto p-4"></div>
           </div>
-        </nav>
-        <div className="flex-1">
-          <div className=" max-w-4xl mx-auto py-4">{children}</div>
+        </div>
+        <div className="flex flex-col">
+          <header className="flex h-14 items-center gap-4 md:hidden  bg-muted/20 px-4 lg:h-[60px] lg:px-6">
+            <Sheet>
+              <SheetTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="shrink-0 md:hidden"
+                >
+                  <Menu className="h-5 w-5" />
+                  <span className="sr-only">Toggle navigation menu</span>
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" className="flex flex-col">
+                <nav className="grid gap-2 text-lg font-medium">
+                  <Link
+                    href="#"
+                    className="flex items-center gap-2 text-lg font-semibold"
+                  >
+                    <Package2 className="h-6 w-6" />
+                    <span className="sr-only">Acme Inc</span>
+                  </Link>
+                  <Link
+                    href="#"
+                    className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <Home className="h-5 w-5" />
+                    Dashboard
+                  </Link>
+                  <Link
+                    href="#"
+                    className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
+                  >
+                    <ShoppingCart className="h-5 w-5" />
+                    Orders
+                  </Link>
+                  <Link
+                    href="#"
+                    className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <Package className="h-5 w-5" />
+                    Products
+                  </Link>
+                  <Link
+                    href="#"
+                    className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <Users className="h-5 w-5" />
+                    Customers
+                  </Link>
+                  <Link
+                    href="#"
+                    className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                  >
+                    <LineChart className="h-5 w-5" />
+                    Analytics
+                  </Link>
+                </nav>
+                <div className="mt-auto"></div>
+              </SheetContent>
+            </Sheet>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  className="rounded-full"
+                >
+                  <CircleUser className="h-5 w-5" />
+                  <span className="sr-only">Toggle user menu</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>My Account</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Settings</DropdownMenuItem>
+                <DropdownMenuItem>Support</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Logout</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </header>
+          <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
+            {children}
+          </main>
         </div>
       </div>
     </NextAuthProvider>

apps/web/src/app/(dashboard)/nav-button.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+export const NavButton: React.FC<{
+  href: string;
+  children: React.ReactNode;
+}> = ({ href, children }) => {
+  const pathname = usePathname();
+
+  const isActive = pathname === href;
+
+  return (
+    <Link
+      href={href}
+      className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary ${isActive ? " bg-secondary" : "text-muted-foreground"}`}
+    >
+      {children}
+    </Link>
+  );
+};