feat: update small screen breakpoint to 768px

src/components/Sidebar/index.tsx

@@ -1,16 +1,20 @@
 import Icon from '@/assets/Icon'
 import Logo from '@/assets/Logo'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import AccountButton from './AccountButton'
+import RelaysButton from './ExploreButton'
 import HomeButton from './HomeButton'
 import NotificationsButton from './NotificationButton'
 import PostButton from './PostButton'
-import RelaysButton from './ExploreButton'
 import SearchButton from './SearchButton'
 import SettingsButton from './SettingsButton'
 
 export default function PrimaryPageSidebar() {
+  const { isSmallScreen } = useScreenSize()
+  if (isSmallScreen) return null
+
   return (
-    <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="w-16 xl:w-52 flex flex-col pb-2 pt-4 px-2 justify-between h-full shrink-0">
       <div className="space-y-2">
         <div className="px-3 xl:px-4 mb-6 w-full">
           <Icon className="xl:hidden" />

src/providers/ScreenSizeProvider.tsx

@@ -16,7 +16,7 @@ export const useScreenSize = () => {
 }
 
 export function ScreenSizeProvider({ children }: { children: React.ReactNode }) {
-  const isSmallScreen = useMemo(() => window.innerWidth < 640, [])
+  const isSmallScreen = useMemo(() => window.innerWidth <= 768, [])
   const isLargeScreen = useMemo(() => window.innerWidth >= 1280, [])
 
   return (