index.tsx raw

   1  import GiteaIcon from '@/assets/GiteaIcon'
   2  import Logo from '@/assets/Logo'
   3  import { Sheet, SheetContent, SheetDescription, SheetTitle } from '@/components/ui/sheet'
   4  import { usePrimaryPage } from '@/PageManager'
   5  import { useNostr } from '@/providers/NostrProvider'
   6  import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
   7  import AccountButton from '../Sidebar/AccountButton'
   8  import BookmarkButton from '../Sidebar/BookmarkButton'
   9  import ChatButton from '../Sidebar/ChatButton'
  10  import HomeButton from '../Sidebar/HomeButton'
  11  import LogoutButton from '../Sidebar/LogoutButton'
  12  import NotificationsButton from '../Sidebar/NotificationButton'
  13  import ProfileButton from '../Sidebar/ProfileButton'
  14  import SettingsButton from '../Sidebar/SettingsButton'
  15  
  16  type SidebarDrawerProps = {
  17    open: boolean
  18    onOpenChange: (open: boolean) => void
  19  }
  20  
  21  export default function SidebarDrawer({ open, onOpenChange }: SidebarDrawerProps) {
  22    const { pubkey } = useNostr()
  23    const { navigate } = usePrimaryPage()
  24  
  25    const handleItemClick = () => {
  26      onOpenChange(false)
  27    }
  28  
  29    return (
  30      <Sheet open={open} onOpenChange={onOpenChange}>
  31        <SheetContent
  32          side="left"
  33          hideClose
  34          className="w-64 p-0 bg-chrome-background border-r-0 rounded-r-none"
  35        >
  36          <VisuallyHidden>
  37            <SheetTitle>Navigation Menu</SheetTitle>
  38            <SheetDescription>App navigation and account menu</SheetDescription>
  39          </VisuallyHidden>
  40          <div className="flex flex-col h-full pb-4 pt-3 px-4 justify-between">
  41            {/* Account at top */}
  42            <div className="space-y-4">
  43              <div onClick={handleItemClick}>
  44                <AccountButton collapse={false} />
  45              </div>
  46            </div>
  47  
  48            {/* Navigation items in the middle */}
  49            <div className="space-y-2 flex-1 py-4">
  50              <div onClick={handleItemClick}>
  51                <HomeButton collapse={false} />
  52              </div>
  53              <div onClick={handleItemClick}>
  54                <NotificationsButton collapse={false} />
  55              </div>
  56              {pubkey && (
  57                <div onClick={handleItemClick}>
  58                  <ChatButton collapse={false} />
  59                </div>
  60              )}
  61              <div onClick={handleItemClick}>
  62                <ProfileButton collapse={false} />
  63              </div>
  64              {pubkey && (
  65                <div onClick={handleItemClick}>
  66                  <BookmarkButton collapse={false} />
  67                </div>
  68              )}
  69              <div onClick={handleItemClick}>
  70                <SettingsButton collapse={false} />
  71              </div>
  72              {pubkey && <LogoutButton collapse={false} />}
  73            </div>
  74  
  75            {/* Logo and version at bottom */}
  76            <div className="space-y-2">
  77              <button
  78                className="px-4 w-full cursor-pointer hover:opacity-80 transition-opacity"
  79                onClick={() => {
  80                  navigate('home')
  81                  handleItemClick()
  82                }}
  83                aria-label="Go to home"
  84              >
  85                <Logo />
  86              </button>
  87              <a
  88                href="https://git.mleku.dev/mleku/smesh"
  89                target="_blank"
  90                rel="noopener noreferrer"
  91                className="flex items-center justify-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
  92              >
  93                <GiteaIcon className="w-4 h-4" />
  94                <span>v{import.meta.env.APP_VERSION}</span>
  95              </a>
  96            </div>
  97          </div>
  98        </SheetContent>
  99      </Sheet>
 100    )
 101  }
 102