feat: improve mobile experience

src/components/Sidebar/index.tsx

@@ -1,35 +1,25 @@
+import Icon from '@/assets/Icon'
 import Logo from '@/assets/Logo'
-import { Button } from '@/components/ui/button'
-import { Info } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import AboutInfoDialog from '../AboutInfoDialog'
-import AccountButton from '../AccountButton'
-import NotificationButton from '../NotificationButton'
-import PostButton from '../PostButton'
-import RelaySettingsButton from '../RelaySettingsButton'
-import SearchButton from '../SearchButton'
+import AccountButton from './AccountButton'
+import HomeButton from './HomeButton'
+import NotificationsButton from './NotificationButton'
+import PostButton from './PostButton'
+import SearchButton from './SearchButton'
 
 export default function PrimaryPageSidebar() {
-  const { t } = useTranslation()
   return (
-    <div className="w-52 h-full shrink-0 hidden xl:flex flex-col pb-8 pt-10 pl-4 justify-between relative">
-      <div className="absolute top-0 left-0 h-11 w-full" />
+    <div className="w-16 xl:w-52 hidden sm:flex flex-col pb-2 pt-4 px-2 justify-between h-full shrink-0">
       <div className="space-y-2">
-        <div className="ml-4 mb-8 w-40">
-          <Logo />
+        <div className="px-2 mb-10 w-full">
+          <Icon className="xl:hidden" />
+          <Logo className="max-xl:hidden" />
         </div>
-        <PostButton variant="sidebar" />
-        <RelaySettingsButton variant="sidebar" />
-        <NotificationButton variant="sidebar" />
-        <SearchButton variant="sidebar" />
-        <AboutInfoDialog>
-          <Button variant="sidebar" size="sidebar">
-            <Info />
-            {t('About')}
-          </Button>
-        </AboutInfoDialog>
+        <HomeButton />
+        <NotificationsButton />
+        <SearchButton />
+        <PostButton />
       </div>
-      <AccountButton variant="sidebar" />
+      <AccountButton />
     </div>
   )
 }