usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-11 18:00:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: update mobile header

Browse source
This commit is contained in:
Johnny 2025-03-12 22:21:22 +08:00
parent 0dfcb1a7c8
commit fb3c17d0e9
3 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/HomeSidebar/HomeSidebarDrawer.tsx
View file

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

12
web/src/components/MobileHeader.tsx
View file

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

18
web/src/components/NavigationDrawer.tsx
View file

@ -1,13 +1,18 @@
import { Drawer } from "@mui/joy"; import { Drawer } from "@mui/joy";
import { Button } from "@usememos/mui"; import { Button } from "@usememos/mui";
import { MenuIcon } from "lucide-react"; import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import { workspaceStore } from "@/store/v2";
import Navigation from "./Navigation"; import Navigation from "./Navigation";
import UserAvatar from "./UserAvatar";
const NavigationDrawer = () => { const NavigationDrawer = observer(() => {
const location = useLocation(); const location = useLocation();
const [open, setOpen] = useState(false); 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(() => { useEffect(() => {
setOpen(false); setOpen(false);
@ -23,8 +28,11 @@ const NavigationDrawer = () => {
return ( return (
<> <>
<Button variant="plain" className="!bg-transparent px-2" onClick={toggleDrawer(true)}> <Button variant="plain" className="px-2" onClick={toggleDrawer(true)}>
<MenuIcon className="w-5 h-auto dark:text-gray-400" /> <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> </Button>
<Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}> <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"> <div className="w-full h-full overflow-auto px-2 bg-zinc-100 dark:bg-zinc-900">
@ -33,6 +41,6 @@ const NavigationDrawer = () => {
</Drawer> </Drawer>
</> </>
); );
}; });
export default NavigationDrawer; export default NavigationDrawer;