Initial commit

components/dashboard/mobile-nav.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Monitor,
+  LayoutDashboard,
+  Laptop,
+  History,
+  Settings,
+  Download,
+  Link2,
+  ShieldCheck,
+  X
+} from 'lucide-react'
+
+interface Profile {
+  fullName: string | null
+  company: string | null
+  role: string | null
+}
+
+interface MobileNavProps {
+  open: boolean
+  onClose: () => void
+  profile: Profile | null
+}
+
+const navItems = [
+  { href: '/dashboard', icon: LayoutDashboard, label: 'Overview' },
+  { href: '/dashboard/machines', icon: Laptop, label: 'Machines' },
+  { href: '/dashboard/connect', icon: Link2, label: 'Quick Connect' },
+  { href: '/dashboard/sessions', icon: History, label: 'Sessions' },
+  { href: '/download', icon: Download, label: 'Download Agent' },
+  { href: '/dashboard/settings', icon: Settings, label: 'Settings' },
+]
+
+const adminNavItems = [
+  { href: '/dashboard/admin', icon: ShieldCheck, label: 'Admin' },
+]
+
+export function MobileNav({ open, onClose, profile }: MobileNavProps) {
+  const pathname = usePathname()
+  const isAdmin = profile?.role === 'admin'
+  const allNavItems = isAdmin ? [...navItems, ...adminNavItems] : navItems
+
+  if (!open) return null
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+        onClick={onClose}
+      />
+
+      <div className="fixed inset-y-0 left-0 z-50 w-72 bg-sidebar border-r border-sidebar-border lg:hidden">
+        <div className="flex h-16 items-center justify-between px-6 border-b border-sidebar-border">
+          <div className="flex items-center gap-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <Monitor className="h-4 w-4 text-primary-foreground" />
+            </div>
+            <span className="font-bold text-sidebar-foreground">RemoteLink</span>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-5 w-5" />
+            <span className="sr-only">Close menu</span>
+          </Button>
+        </div>
+
+        <nav className="flex-1 p-4 space-y-1">
+          {allNavItems.map((item) => {
+            const isActive =
+              pathname === item.href ||
+              (item.href !== '/dashboard' && pathname.startsWith(item.href))
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onClose}
+                className={cn(
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'
+                )}
+              >
+                <item.icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            )
+          })}
+        </nav>
+
+        <div className="p-4 border-t border-sidebar-border">
+          <div className="flex items-center gap-3 px-3 py-2">
+            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium">
+              {profile?.fullName?.charAt(0)?.toUpperCase() || 'U'}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-sidebar-foreground truncate">
+                {profile?.fullName || 'User'}
+              </p>
+              <p className="text-xs text-sidebar-foreground/60 truncate">
+                {profile?.company || 'Personal'}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}