Emails Vertical Sidebar Mobile

1"use client";
2 
3import {
4  SparklesIcon,
5  GalleryVerticalEndIcon,
6  MailIcon,
7  FolderClosedIcon,
8  AudioLinesIcon,
9  GitForkIcon,
10  FilesIcon,
11  ShieldIcon,
12  UnplugIcon,
13  LifeBuoyIcon,
14} from "lucide-react";
15import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
16import { Button } from "@/components/ui/button";
17import { cn } from "@/lib/utils";
18 
19interface EmailsVerticalSidebarMobileProps {
20  onItemClick?: () => void;
21}
22 
23export function EmailsVerticalSidebarMobile({
24  onItemClick,
25}: EmailsVerticalSidebarMobileProps = {}) {
26  const topItems = [
27    { icon: SparklesIcon, label: "Sparkles", active: false },
28    { icon: GalleryVerticalEndIcon, label: "Gallery", active: false },
29    { icon: MailIcon, label: "Inbox", active: true },
30    { icon: FolderClosedIcon, label: "Drafts", active: false },
31    { icon: AudioLinesIcon, label: "Sent", active: false },
32    { icon: GitForkIcon, label: "Junk", active: false },
33    { icon: FilesIcon, label: "Trash", active: false },
34  ];
35 
36  const bottomItems = [
37    { icon: ShieldIcon, label: "Security" },
38    { icon: UnplugIcon, label: "Disconnect" },
39    { icon: LifeBuoyIcon, label: "Help" },
40  ];
41 
42  return (
43    <div className="flex h-screen w-full flex-col items-start gap-4 border-r border-border bg-background py-4 px-3">
44      <div className="flex items-center gap-2">
45        <Button
46          variant="default"
47          size="icon-sm"
48          className="relative size-9 overflow-hidden rounded-lg bg-linear-to-br from-white via-purple-200 to-blue-200 hover:opacity-90"
49        >
50          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]" />
51          <svg className="relative size-4" viewBox="0 0 16 16" fill="none">
52            <path
53              d="M8 2L2 8L8 14"
54              stroke="black"
55              strokeWidth="2"
56              strokeLinecap="round"
57              strokeLinejoin="round"
58            />
59            <path
60              d="M8 2L14 8L8 14"
61              stroke="black"
62              strokeWidth="2"
63              strokeLinecap="round"
64              strokeLinejoin="round"
65            />
66          </svg>
67        </Button>
68        <div className="flex flex-col justify-center">
69// … truncated