chore: add use reponsive width

web/src/components/HomeSidebarDrawer.tsx

@@ -21,7 +21,7 @@ const HomeSidebarDrawer = () => {
   };
 
   return (
-    <div className="md:hidden">
+    <>
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Search className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
@@ -30,7 +30,7 @@ const HomeSidebarDrawer = () => {
           <HomeSidebar />
         </div>
       </Drawer>
-    </div>
+    </>
   );
 };
 

web/src/components/MobileHeader.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import NavigationDrawer from "./NavigationDrawer";
 
 interface Props {
@@ -7,12 +8,13 @@ interface Props {
 
 const MobileHeader = (props: Props) => {
   const { children } = props;
+  const { sm } = useResponsiveWidth();
   const [titleText] = useState("MEMOS");
 
   return (
     <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
-        <NavigationDrawer />
+        {!sm && <NavigationDrawer />}
         <span
           className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
           onClick={() => location.reload()}

web/src/components/NavigationDrawer.tsx

@@ -21,7 +21,7 @@ const NavigationDrawer = () => {
   };
 
   return (
-    <div className="sm:hidden">
+    <>
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
@@ -30,7 +30,7 @@ const NavigationDrawer = () => {
           <Navigation />
         </div>
       </Drawer>
-    </div>
+    </>
   );
 };
 

web/src/hooks/useResponsiveWidth.ts

@@ -0,0 +1,18 @@
+import useWindowSize from "react-use/lib/useWindowSize";
+
+enum TailwindResponsiveWidth {
+  sm = 640,
+  md = 768,
+  lg = 1024,
+}
+
+const useResponsiveWidth = () => {
+  const { width } = useWindowSize();
+  return {
+    sm: width >= TailwindResponsiveWidth.sm,
+    md: width >= TailwindResponsiveWidth.md,
+    lg: width >= TailwindResponsiveWidth.lg,
+  };
+};
+
+export default useResponsiveWidth;

web/src/pages/Home.tsx

@@ -3,20 +3,22 @@ import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
 import MemoEditor from "@/components/MemoEditor";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
+import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 
 const Home = () => {
+  const { md } = useResponsiveWidth();
   return (
     <div className="w-full flex flex-row justify-start items-start">
       <div className="w-full px-4 md:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
-        <MobileHeader>
+        <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
-          <HomeSidebarDrawer />
-        </MobileHeader>
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
         <MemoList />
       </div>
+      {md && (
         <div className="hidden md:block sticky top-0 left-0 w-56">
           <HomeSidebar />
         </div>
+      )}
     </div>
   );
 };