happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): show selection bar in desktop header

This commit is contained in:
Local Admin 2026-01-27 00:37:06 +00:00
parent e07cbe8069
commit 06609971a7
3 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/components/DesktopHeader.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Link } from "react-router-dom";
import { useInstance } from "@/contexts/InstanceContext";
import UserAvatar from "@/components/UserAvatar";
const DesktopHeader = () => {
const { generalSetting } = useInstance();
const title = generalSetting.customProfile?.title || "Memos";
const avatarUrl = generalSetting.customProfile?.logoUrl || "/full-logo.webp";
return (
<div className="w-full flex flex-col gap-2">
<div className="w-full flex flex-row justify-between items-center">
<Link to="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
<UserAvatar className="shrink-0 w-6 h-6 rounded-md" avatarUrl={avatarUrl} />
<span className="font-bold text-lg leading-6 text-foreground truncate">{title}</span>
</Link>
<div className="flex flex-row justify-end items-center">
<div id="memo-selection-actions" className="flex flex-row justify-end items-center" />
</div>
</div>
</div>
);
};
export default DesktopHeader;

10
web/src/components/MobileHeader.tsx
View File

@ -19,16 +19,16 @@ const MobileHeader = (props: Props) => {
return (
<div
className={cn(
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-background bg-opacity-80 backdrop-blur-lg flex flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
"sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-background bg-opacity-80 backdrop-blur-lg flex flex-col w-full h-auto shrink-0 z-1",
offsetTop > 0 && "shadow-md",
className,
)}
>
{!sm && <NavigationDrawer />}
<div className="w-full flex flex-row justify-end items-center gap-2">
<div id="memo-selection-actions" className="flex flex-row justify-end items-center gap-1" />
{children}
<div className="flex flex-row justify-between items-center w-full flex-nowrap">
{!sm && <NavigationDrawer />}
<div className="w-full flex flex-row justify-end items-center gap-2">{children}</div>
</div>
<div id="memo-selection-actions" className="mt-2 flex flex-row justify-end items-center" />
</div>
);
};

8
web/src/layouts/MainLayout.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
import { matchPath, Outlet, useLocation } from "react-router-dom";
import type { MemoExplorerContext } from "@/components/MemoExplorer";
import { MemoExplorer, MemoExplorerDrawer } from "@/components/MemoExplorer";
import DesktopHeader from "@/components/DesktopHeader";
import MobileHeader from "@/components/MobileHeader";
import { userServiceClient } from "@/connect";
import useCurrentUser from "@/hooks/useCurrentUser";
@ -80,7 +81,12 @@ const MainLayout = () => {
</div>
)}
<div className={cn("w-full min-h-full", lg ? "pl-72" : md ? "pl-56" : "")}>
<div className={cn("w-full mx-auto px-4 sm:px-6 md:pt-6 pb-8")}>
{md && (
<div className="sticky top-0 z-1 bg-background/80 backdrop-blur-lg border-b border-border/60 px-4 sm:px-6 py-3">
<DesktopHeader />
</div>
)}
<div className={cn("w-full mx-auto px-4 sm:px-6 md:pt-4 pb-8")}>
<Outlet />
</div>
</div>