chore: update home sidebar

web/src/components/Header.tsx

@@ -98,7 +98,7 @@ const Header = () => {
     : [exploreNavLink, signInNavLink];
 
   return (
-    <header className={`w-full h-full overflow-auto flex flex-col justify-start items-start py-4 z-30`}>
+    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 z-30">
       <UserBanner />
       <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (

web/src/components/HomeSidebar.tsx

-import { useLayoutStore } from "../store/module";
 import SearchBar from "./SearchBar";
 import TagList from "./TagList";
 import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {
-  const layoutStore = useLayoutStore();
-  const showHomeSidebar = layoutStore.state.showHomeSidebar;
-
   return (
-    <div
-      className={`fixed md:sticky top-0 left-0 w-full md:w-56 h-full shrink-0 pointer-events-none md:pointer-events-auto z-10 ${
-        showHomeSidebar && "pointer-events-auto"
-      }`}
-    >
-      <div
-        className={`fixed top-0 left-0 w-full h-full opacity-0 pointer-events-none transition-opacity duration-300 md:!hidden ${
-          showHomeSidebar && "opacity-60 pointer-events-auto"
-        }`}
-        onClick={() => layoutStore.setHomeSidebarStatus(false)}
-      ></div>
-      <aside
-        className={`absolute md:relative top-0 right-0 w-56 pr-2 md:w-full h-full max-h-screen border-l sm:border-none dark:border-l-zinc-700 overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 z-30 bg-zinc-100 dark:bg-zinc-800 md:bg-transparent md:shadow-none transition-all duration-300 translate-x-full md:translate-x-0 ${
-          showHomeSidebar && "!translate-x-0 shadow-2xl"
-        }`}
-      >
+    <aside className="relative w-full pr-2 h-full overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4">
       <div className="px-4 pr-8 mb-4 w-full">
         <SearchBar />
       </div>
       <UsageHeatMap />
       <TagList />
     </aside>
-    </div>
   );
 };
 

web/src/components/HomeSidebarDrawer.tsx

+import { Drawer, IconButton } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import HomeSidebar from "./HomeSidebar";
+import Icon from "./Icon";
+
+const HomeSidebarDrawer = () => {
+  const location = useLocation();
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [location.pathname]);
+
+  const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
+    if (event.type === "keydown" && ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")) {
+      return;
+    }
+
+    setOpen(inOpen);
+  };
+
+  return (
+    <div className="md:hidden">
+      <IconButton onClick={toggleDrawer(true)}>
+        <Icon.Search className="w-5 h-auto dark:text-gray-200" />
+      </IconButton>
+      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+        <div className="w-full px-4">
+          <HomeSidebar />
+        </div>
+      </Drawer>
+    </div>
+  );
+};
+
+export default HomeSidebarDrawer;

web/src/components/MobileHeader.tsx

 import { useState } from "react";
-import { useLayoutStore } from "@/store/module";
 import HeaderDrawer from "./HeaderDrawer";
-import Icon from "./Icon";
+import HomeSidebarDrawer from "./HomeSidebarDrawer";
 
 interface Props {
   showSearch?: boolean;
@@ -9,7 +8,6 @@ interface Props {
 
 const MobileHeader = (props: Props) => {
   const { showSearch = true } = props;
-  const layoutStore = useLayoutStore();
   const [titleText] = useState("MEMOS");
 
   return (
@@ -24,7 +22,7 @@ const MobileHeader = (props: Props) => {
         </span>
       </div>
       <div className={`${showSearch ? "flex" : "hidden"} flex-row justify-end items-center pr-1`}>
-        <Icon.Search className="w-5 h-auto dark:text-gray-200" onClick={() => layoutStore.setHomeSidebarStatus(true)} />
+        <HomeSidebarDrawer />
       </div>
     </div>
   );

web/src/pages/Home.tsx

@@ -11,8 +11,10 @@ const Home = () => {
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
         <MemoList />
       </div>
+      <div className="hidden md:block sticky top-0 left-0 w-56">
         <HomeSidebar />
       </div>
+    </div>
   );
 };
 

web/src/store/index.ts

@@ -3,7 +3,6 @@ import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import dialogReducer from "./reducer/dialog";
 import filterReducer from "./reducer/filter";
 import globalReducer from "./reducer/global";
-import layoutReducer from "./reducer/layout";
 import memoReducer from "./reducer/memo";
 import resourceReducer from "./reducer/resource";
 import tagReducer from "./reducer/tag";
@@ -18,7 +17,6 @@ const store = configureStore({
     filter: filterReducer,
     resource: resourceReducer,
     dialog: dialogReducer,
-    layout: layoutReducer,
   },
 });
 

web/src/store/module/index.ts

@@ -5,4 +5,3 @@ export * from "./tag";
 export * from "./resource";
 export * from "./user";
 export * from "./dialog";
-export * from "./layout";

web/src/store/module/layout.ts

-import store, { useAppSelector } from "..";
-import { setHomeSidebarStatus } from "../reducer/layout";
-
-export const useLayoutStore = () => {
-  const state = useAppSelector((state) => state.layout);
-  return {
-    state,
-    getState: () => {
-      return store.getState().tag;
-    },
-    setHomeSidebarStatus: (showHomeSidebar: boolean) => {
-      store.dispatch(setHomeSidebarStatus(showHomeSidebar));
-    },
-  };
-};

web/src/store/reducer/layout.ts

-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
-
-interface State {
-  showHomeSidebar: boolean;
-}
-
-const layoutSlice = createSlice({
-  name: "layout",
-  initialState: {
-    showHomeSidebar: false,
-  } as State,
-  reducers: {
-    setHomeSidebarStatus: (state, action: PayloadAction<boolean>) => {
-      return {
-        ...state,
-        showHomeSidebar: action.payload,
-      };
-    },
-  },
-});
-
-export const { setHomeSidebarStatus } = layoutSlice.actions;
-
-export default layoutSlice.reducer;

web/src/utils/layout.ts

-// resolution is used to define the breakpoints for the media queries.
-// It's same as the breakpoints defined in tailwind.config.js
-export const resolution = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-};