chore: update navigation

web/src/components/HomeSidebarDrawer.tsx

@@ -25,7 +25,7 @@ const HomeSidebarDrawer = () => {
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Search className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
-      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+      <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full px-4">
           <HomeSidebar />
         </div>

web/src/components/MemoList.tsx

@@ -116,12 +116,12 @@ const MemoList: React.FC = () => {
         </div>
       ) : (
         <div className="flex flex-col justify-start items-center w-full my-6">
-          <div className="text-sm text-gray-400 italic">
+          <div className="text-gray-400 italic">
             {loadingStatus === "complete" ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />
-                  <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+                  <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
                 </div>
               )
             ) : (

web/src/components/MobileHeader.tsx

@@ -1,19 +1,18 @@
 import { useState } from "react";
-import HeaderDrawer from "./HeaderDrawer";
+import NavigationDrawer from "./NavigationDrawer";
-import HomeSidebarDrawer from "./HomeSidebarDrawer";
 
 interface Props {
-  showSearch?: boolean;
+  children?: React.ReactNode;
 }
 
 const MobileHeader = (props: Props) => {
-  const { showSearch } = props;
+  const { children } = props;
   const [titleText] = useState("MEMOS");
 
   return (
     <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
-        <HeaderDrawer />
+        <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-200"
           onClick={() => location.reload()}
@@ -21,7 +20,7 @@ const MobileHeader = (props: Props) => {
           {titleText}
         </span>
       </div>
-      <div className={`flex flex-row justify-end items-center pr-1`}>{showSearch && <HomeSidebarDrawer />}</div>
+      <div className="flex flex-row justify-end items-center">{children}</div>
     </div>
   );
 };

web/src/components/Navigation.tsx

@@ -15,7 +15,7 @@ interface NavLinkItem {
   icon: React.ReactNode;
 }
 
-const Header = () => {
+const Navigation = () => {
   const t = useTranslate();
   const user = useCurrentUser();
   const inboxStore = useInboxStore();
@@ -123,4 +123,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Navigation;

web/src/components/NavigationDrawer.tsx

@@ -1,10 +1,10 @@
 import { Drawer, IconButton } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import Header from "./Header";
 import Icon from "./Icon";
+import Navigation from "./Navigation";
 
-const HeaderDrawer = () => {
+const NavigationDrawer = () => {
   const location = useLocation();
   const [open, setOpen] = useState(false);
 
@@ -25,13 +25,13 @@ const HeaderDrawer = () => {
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
-      <Drawer anchor="left" open={open} onClose={toggleDrawer(false)}>
+      <Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full px-4">
-          <Header />
+          <Navigation />
         </div>
       </Drawer>
     </div>
   );
 };
 
-export default HeaderDrawer;
+export default NavigationDrawer;

web/src/components/UsageHeatMap.tsx

@@ -52,10 +52,6 @@ const UsageHeatMap = () => {
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
 
-  if (!user) {
-    return;
-  }
-
   useEffect(() => {
     userV1Store.getOrFetchUserByUsername(extractUsernameFromName(user.name)).then((user) => {
       if (!user) {

web/src/layouts/Root.tsx

@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import DemoBanner from "@/components/DemoBanner";
-import Header from "@/components/Header";
+import Navigation from "@/components/Navigation";
 
 function Root() {
   return (
@@ -10,7 +10,7 @@ function Root() {
       </div>
       <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <div className="hidden sm:block sticky top-0 left-0 w-56">
-          <Header />
+          <Navigation />
         </div>
         <main className="w-full min-h-screen sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />

web/src/pages/Home.tsx

@@ -1,4 +1,5 @@
 import HomeSidebar from "@/components/HomeSidebar";
+import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
 import MemoEditor from "@/components/MemoEditor";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
@@ -7,7 +8,9 @@ const Home = () => {
   return (
     <div className="w-full flex flex-row justify-start items-start">
       <div className="w-full px-4 md:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
-        <MobileHeader showSearch={true} />
+        <MobileHeader>
+          <HomeSidebarDrawer />
+        </MobileHeader>
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
         <MemoList />
       </div>

web/src/router/index.tsx

@@ -23,7 +23,7 @@ const initialGlobalStateLoader = async () => {
   try {
     await initialGlobalState();
   } catch (error) {
-    // do nth
+    // do nothing.
   }
   return null;
 };