diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index fe4905cc..3b23cbd0 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -98,7 +98,7 @@ const Header = () => { : [exploreNavLink, signInNavLink]; return ( -
+
{navLinks.map((navLink) => ( diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx index c339ced7..2df5e415 100644 --- a/web/src/components/HomeSidebar.tsx +++ b/web/src/components/HomeSidebar.tsx @@ -1,36 +1,16 @@ -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 ( -
-
layoutStore.setHomeSidebarStatus(false)} - >
- -
+ ); }; diff --git a/web/src/components/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebarDrawer.tsx new file mode 100644 index 00000000..bfe88912 --- /dev/null +++ b/web/src/components/HomeSidebarDrawer.tsx @@ -0,0 +1,37 @@ +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 ( +
+ + + + +
+ +
+ +
+ ); +}; + +export default HomeSidebarDrawer; diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx index 18c5e8b7..6ac8e1ec 100644 --- a/web/src/components/MobileHeader.tsx +++ b/web/src/components/MobileHeader.tsx @@ -1,7 +1,6 @@ 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) => {
- layoutStore.setHomeSidebarStatus(true)} /> +
); diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 5a3df812..57058f94 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -11,7 +11,9 @@ const Home = () => { - +
+ +
); }; diff --git a/web/src/store/index.ts b/web/src/store/index.ts index 7853c4f7..ea0286c2 100644 --- a/web/src/store/index.ts +++ b/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, }, }); diff --git a/web/src/store/module/index.ts b/web/src/store/module/index.ts index 0604c7b7..c4100aad 100644 --- a/web/src/store/module/index.ts +++ b/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"; diff --git a/web/src/store/module/layout.ts b/web/src/store/module/layout.ts deleted file mode 100644 index 1437ab9c..00000000 --- a/web/src/store/module/layout.ts +++ /dev/null @@ -1,15 +0,0 @@ -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)); - }, - }; -}; diff --git a/web/src/store/reducer/layout.ts b/web/src/store/reducer/layout.ts deleted file mode 100644 index 5af9fd0f..00000000 --- a/web/src/store/reducer/layout.ts +++ /dev/null @@ -1,24 +0,0 @@ -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) => { - return { - ...state, - showHomeSidebar: action.payload, - }; - }, - }, -}); - -export const { setHomeSidebarStatus } = layoutSlice.actions; - -export default layoutSlice.reducer; diff --git a/web/src/utils/layout.ts b/web/src/utils/layout.ts deleted file mode 100644 index d1d7544d..00000000 --- a/web/src/utils/layout.ts +++ /dev/null @@ -1,7 +0,0 @@ -// 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, -};