fix: mobile header

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: <Globe2Icon className="w-4 h-auto opacity-70 shrink-0" />,
   };
+  const archivedNavLink: NavLinkItem = {
+    id: "header-archived",
+    path: Routes.ARCHIVED,
+    title: t("common.archived"),
+    icon: <ArchiveIcon className="w-4 h-auto opacity-70 shrink-0" />,
+  };
 
-  const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink] : [exploreNavLink];
+  const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink, archivedNavLink] : [exploreNavLink];
 
   useDebounce(
     async () => {

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: <ArchiveIcon className="w-6 h-auto opacity-70 shrink-0" />,
-  };
   const settingNavLink: NavLinkItem = {
     id: "header-setting",
     path: Routes.SETTING,
@@ -76,7 +70,7 @@ const Navigation = observer((props: Props) => {
     icon: <UserCircleIcon className="w-6 h-auto opacity-70 shrink-0" />,
   };
 
-  const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, archivedNavLink, settingNavLink] : [signInNavLink];
+  const navLinks: NavLinkItem[] = currentUser ? [resourcesNavLink, inboxNavLink, settingNavLink] : [signInNavLink];
 
   return (
     <header

web/src/components/UserBanner.tsx

@@ -32,7 +32,6 @@ const UserBanner = (props: Props) => {
               "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 ? (
               <UserAvatar className="shrink-0" avatarUrl={currentUser.avatarUrl} />

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 (
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
-      <MobileHeader />
+      {!md && <MobileHeader />}
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">

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<State>({
     searchQuery: "",
@@ -64,7 +66,7 @@ const Resources = () => {
 
   return (
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
-      <MobileHeader />
+      {!md && <MobileHeader />}
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">

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<SettingSection, LucideIcon> = {
 
 const Setting = observer(() => {
   const t = useTranslate();
+  const { md } = useResponsiveWidth();
   const location = useLocation();
   const user = useCurrentUser();
   const [state, setState] = useState<State>({
@@ -83,7 +85,7 @@ const Setting = observer(() => {
 
   return (
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
-      <MobileHeader />
+      {!md && <MobileHeader />}
       <div className="w-full px-4 sm:px-6">
         <div className="w-full shadow flex flex-row justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-gray-600 dark:text-gray-400">
           <div className="hidden sm:flex flex-col justify-start items-start w-40 h-auto shrink-0 py-2">