From 5d41e31d07639280b0672902df741ed8d37bf400 Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sat, 28 Jun 2025 12:30:38 +0800
Subject: [PATCH] feat: update small screen breakpoint to 768px

---
 src/components/Sidebar/index.tsx     | 8 ++++++--
 src/providers/ScreenSizeProvider.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index afc44b2..62f4642 100644
--- a/src/components/Sidebar/index.tsx
+++ b/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" />
diff --git a/src/providers/ScreenSizeProvider.tsx b/src/providers/ScreenSizeProvider.tsx
index 6b4c2ba..3f86b59 100644
--- a/src/providers/ScreenSizeProvider.tsx
+++ b/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 (