chore: update mobile header

Author: johnnyjoygh

web/src/components/HomeSidebar/HomeSidebarDrawer.tsx

@@ -1,6 +1,6 @@
 import { Drawer } from "@mui/joy";
 import { Button } from "@usememos/mui";
-import { SearchIcon } from "lucide-react";
+import { MenuIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import HomeSidebar from "./HomeSidebar";
@@ -24,7 +24,7 @@ const HomeSidebarDrawer = () => {
   return (
     <>
       <Button variant="plain" className="!bg-transparent px-2" onClick={toggleDrawer(true)}>
-        <SearchIcon className="w-5 h-auto dark:text-gray-400" />
+        <MenuIcon className="w-6 h-auto dark:text-gray-400" />
       </Button>
       <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full h-full bg-zinc-100 dark:bg-zinc-900">

web/src/components/MobileHeader.tsx

@@ -1,6 +1,5 @@
 import useWindowScroll from "react-use/lib/useWindowScroll";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
-import { workspaceStore } from "@/store/v2";
 import { cn } from "@/utils";
 import NavigationDrawer from "./NavigationDrawer";
 
@@ -13,7 +12,6 @@ const MobileHeader = (props: Props) => {
   const { className, children } = props;
   const { sm } = useResponsiveWidth();
   const { y: offsetTop } = useWindowScroll();
-  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
 
   return (
     <div
@@ -23,15 +21,7 @@ const MobileHeader = (props: Props) => {
         className,
       )}
     >
-      <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
-        {!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-300"
-          onDoubleClick={() => location.reload()}
-        >
-          {workspaceGeneralSetting.customProfile?.title || "Memos"}
-        </span>
-      </div>
+      <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">{!sm && <NavigationDrawer />}</div>
       <div className="flex flex-row justify-end items-center">{children}</div>
     </div>
   );

web/src/components/NavigationDrawer.tsx

@@ -1,13 +1,18 @@
 import { Drawer } from "@mui/joy";
 import { Button } from "@usememos/mui";
-import { MenuIcon } from "lucide-react";
+import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
+import { workspaceStore } from "@/store/v2";
 import Navigation from "./Navigation";
+import UserAvatar from "./UserAvatar";
 
-const NavigationDrawer = () => {
+const NavigationDrawer = observer(() => {
   const location = useLocation();
   const [open, setOpen] = useState(false);
+  const workspaceGeneralSetting = workspaceStore.state.generalSetting;
+  const title = workspaceGeneralSetting.customProfile?.title || "Memos";
+  const avatarUrl = workspaceGeneralSetting.customProfile?.logoUrl || "/full-logo.webp";
 
   useEffect(() => {
     setOpen(false);
@@ -23,8 +28,11 @@ const NavigationDrawer = () => {
 
   return (
     <>
-      <Button variant="plain" className="!bg-transparent px-2" onClick={toggleDrawer(true)}>
-        <MenuIcon className="w-5 h-auto dark:text-gray-400" />
+      <Button variant="plain" className="px-2" onClick={toggleDrawer(true)}>
+        <UserAvatar className="shrink-0 w-6 h-6 rounded-md" avatarUrl={avatarUrl} />
+        <span className="font-bold text-lg leading-10 ml-2 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-300">
+          {title}
+        </span>
       </Button>
       <Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full h-full overflow-auto px-2 bg-zinc-100 dark:bg-zinc-900">
@@ -33,6 +41,6 @@ const NavigationDrawer = () => {
       </Drawer>
     </>
   );
-};
+});
 
 export default NavigationDrawer;