diff --git a/web/src/components/HomeSidebar/HomeSidebar.tsx b/web/src/components/HomeSidebar/HomeSidebar.tsx index ca0466c488fdd..406ff9e13bdb3 100644 --- a/web/src/components/HomeSidebar/HomeSidebar.tsx +++ b/web/src/components/HomeSidebar/HomeSidebar.tsx @@ -1,5 +1,5 @@ import { last } from "lodash-es"; -import { Globe2Icon, HomeIcon } from "lucide-react"; +import { ArchiveIcon, Globe2Icon, HomeIcon } from "lucide-react"; import { observer } from "mobx-react-lite"; import { matchPath, NavLink, useLocation } from "react-router-dom"; import useDebounce from "react-use/lib/useDebounce"; @@ -44,8 +44,14 @@ const HomeSidebar = observer((props: Props) => { title: t("common.explore"), icon: , }; + const archivedNavLink: NavLinkItem = { + id: "header-archived", + path: Routes.ARCHIVED, + title: t("common.archived"), + icon: , + }; - const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink] : [exploreNavLink]; + const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, archivedNavLink] : [exploreNavLink]; useDebounce( async () => { diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx index ee1ed2c720c3d..758a6d5a60c96 100644 --- a/web/src/components/Navigation.tsx +++ b/web/src/components/Navigation.tsx @@ -1,5 +1,5 @@ import { Tooltip } from "@mui/joy"; -import { ArchiveIcon, BellIcon, PaperclipIcon, SettingsIcon, UserCircleIcon } from "lucide-react"; +import { BellIcon, PaperclipIcon, SettingsIcon, UserCircleIcon } from "lucide-react"; import { observer } from "mobx-react-lite"; import { useEffect } from "react"; import { NavLink } from "react-router-dom"; @@ -57,12 +57,6 @@ const Navigation = observer((props: Props) => { ), }; - const archivedNavLink: NavLinkItem = { - id: "header-archived", - path: Routes.ARCHIVED, - title: t("common.archived"), - icon: , - }; const settingNavLink: NavLinkItem = { id: "header-setting", path: Routes.SETTING, @@ -76,7 +70,7 @@ const Navigation = observer((props: Props) => { icon: , }; - const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, archivedNavLink, settingNavLink] : [signInNavLink]; + const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, settingNavLink] : [signInNavLink]; return (
{ "w-auto flex flex-row justify-start items-center cursor-pointer text-gray-800 dark:text-gray-400", collapsed ? "px-1" : "px-3", )} - onClick={() => navigateTo(currentUser ? Routes.ROOT : Routes.EXPLORE)} > {currentUser.avatarUrl ? ( diff --git a/web/src/pages/Inboxes.tsx b/web/src/pages/Inboxes.tsx index 1ddd13cb7f6f5..8a633a1444e7a 100644 --- a/web/src/pages/Inboxes.tsx +++ b/web/src/pages/Inboxes.tsx @@ -5,12 +5,14 @@ import { useEffect } from "react"; import Empty from "@/components/Empty"; import MemoCommentMessage from "@/components/Inbox/MemoCommentMessage"; import MobileHeader from "@/components/MobileHeader"; +import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import { userStore } from "@/store/v2"; import { Inbox_Status, Inbox_Type } from "@/types/proto/api/v1/inbox_service"; import { useTranslate } from "@/utils/i18n"; const Inboxes = observer(() => { const t = useTranslate(); + const { md } = useResponsiveWidth(); const inboxes = sortBy(userStore.state.inboxes, (inbox) => { if (inbox.status === Inbox_Status.UNREAD) return 0; if (inbox.status === Inbox_Status.ARCHIVED) return 1; @@ -23,7 +25,7 @@ const Inboxes = observer(() => { return (
- + {!md && }
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx index 90c3a5dc4e43f..a42140ee51438 100644 --- a/web/src/pages/Resources.tsx +++ b/web/src/pages/Resources.tsx @@ -9,6 +9,7 @@ import MobileHeader from "@/components/MobileHeader"; import ResourceIcon from "@/components/ResourceIcon"; import { resourceServiceClient } from "@/grpcweb"; import useLoading from "@/hooks/useLoading"; +import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import i18n from "@/i18n"; import { useMemoStore } from "@/store/v1"; import { Resource } from "@/types/proto/api/v1/resource_service"; @@ -34,6 +35,7 @@ interface State { const Resources = () => { const t = useTranslate(); + const { md } = useResponsiveWidth(); const loadingState = useLoading(); const [state, setState] = useState({ searchQuery: "", @@ -64,7 +66,7 @@ const Resources = () => { return (
- + {!md && }
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx index 410a6a320a514..0c2d1b949ace3 100644 --- a/web/src/pages/Setting.tsx +++ b/web/src/pages/Setting.tsx @@ -13,6 +13,7 @@ import SectionMenuItem from "@/components/Settings/SectionMenuItem"; import StorageSection from "@/components/Settings/StorageSection"; import WorkspaceSection from "@/components/Settings/WorkspaceSection"; import useCurrentUser from "@/hooks/useCurrentUser"; +import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import { workspaceStore } from "@/store/v2"; import { User_Role } from "@/types/proto/api/v1/user_service"; import { WorkspaceSettingKey } from "@/types/proto/store/workspace_setting"; @@ -38,6 +39,7 @@ const SECTION_ICON_MAP: Record = { const Setting = observer(() => { const t = useTranslate(); + const { md } = useResponsiveWidth(); const location = useLocation(); const user = useCurrentUser(); const [state, setState] = useState({ @@ -83,7 +85,7 @@ const Setting = observer(() => { return (
- + {!md && }