Skip to content

Commit 8e4e745

Browse files
johnnyjoyghjohnnyjoygh
committed
chore: update navigation
1 parent 3a7b24b commit 8e4e745

11 files changed

+82
-53
lines changed

‎web/src/components/ActivityCalendar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const ActivityCalendar = (props: Props) => {
8484
const isToday = dayjs().format("YYYY-MM-DD") === date;
8585
const tooltipText =
8686
count === 0
87-
? t("memo.no-memos")
87+
? date
8888
: t("memo.count-memos-in-date", {
8989
count: count,
9090
memos: count === 1 ? t("common.memo") : t("common.memos"),

‎web/src/components/HomeSidebar/HomeSidebar.tsx

+57-4
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,55 @@
1+
import { Globe2Icon, HomeIcon, LogInIcon } from "lucide-react";
2+
import { NavLink } from "react-router-dom";
13
import useDebounce from "react-use/lib/useDebounce";
24
import SearchBar from "@/components/SearchBar";
35
import useCurrentUser from "@/hooks/useCurrentUser";
6+
import { Routes } from "@/router";
47
import { useMemoList, useUserStatsStore } from "@/store/v1";
58
import { cn } from "@/utils";
9+
import { useTranslate } from "@/utils/i18n";
610
import MemoFilters from "../MemoFilters";
711
import StatisticsView from "../StatisticsView";
812
import ShortcutsSection from "./ShortcutsSection";
913
import TagsSection from "./TagsSection";
1014

15+
interface NavLinkItem {
16+
id: string;
17+
path: string;
18+
title: string;
19+
icon: React.ReactNode;
20+
}
21+
1122
interface Props {
1223
className?: string;
1324
}
1425

1526
const HomeSidebar = (props: Props) => {
27+
const t = useTranslate();
1628
const currentUser = useCurrentUser();
1729
const memoList = useMemoList();
1830
const userStatsStore = useUserStatsStore();
1931

32+
const homeNavLink: NavLinkItem = {
33+
id: "header-home",
34+
path: Routes.ROOT,
35+
title: t("common.home"),
36+
icon: <HomeIcon className="w-4 h-auto opacity-70 shrink-0" />,
37+
};
38+
const exploreNavLink: NavLinkItem = {
39+
id: "header-explore",
40+
path: Routes.EXPLORE,
41+
title: t("common.explore"),
42+
icon: <Globe2Icon className="w-4 h-auto opacity-70 shrink-0" />,
43+
};
44+
const signInNavLink: NavLinkItem = {
45+
id: "header-auth",
46+
path: Routes.AUTH,
47+
title: t("common.sign-in"),
48+
icon: <LogInIcon className="w-4 h-auto opacity-70 shrink-0" />,
49+
};
50+
51+
const navLinks: NavLinkItem[] = currentUser ? [homeNavLink, exploreNavLink] : [exploreNavLink, signInNavLink];
52+
2053
useDebounce(
2154
async () => {
2255
await userStatsStore.listUserStats(currentUser.name);
@@ -26,12 +59,32 @@ const HomeSidebar = (props: Props) => {
2659
);
2760

2861
return (
29-
<aside className={cn("relative w-full h-full overflow-auto hide-scrollbar flex flex-col justify-start items-start", props.className)}>
62+
<aside className={cn("relative w-full h-full overflow-auto flex flex-col justify-start items-start", props.className)}>
3063
<SearchBar />
64+
<div className="mt-2 w-full space-y-1">
65+
{navLinks.map((navLink) => (
66+
<NavLink
67+
key={navLink.id}
68+
className={({ isActive }) =>
69+
cn(
70+
"w-full px-2 rounded-xl border flex flex-row items-center text-sm text-zinc-600 dark:text-gray-400 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
71+
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent",
72+
)
73+
}
74+
to={navLink.path}
75+
viewTransition
76+
>
77+
{navLink.icon}
78+
<span className="ml-2 truncate leading-8">{navLink.title}</span>
79+
</NavLink>
80+
))}
81+
</div>
3182
<MemoFilters />
32-
<StatisticsView />
33-
{currentUser && <ShortcutsSection />}
34-
<TagsSection />
83+
<div className="px-2 w-full">
84+
<StatisticsView />
85+
{currentUser && <ShortcutsSection />}
86+
<TagsSection />
87+
</div>
3588
</aside>
3689
);
3790
};

‎web/src/components/HomeSidebar/HomeSidebarDrawer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const HomeSidebarDrawer = () => {
2727
<SearchIcon className="w-5 h-auto dark:text-gray-400" />
2828
</Button>
2929
<Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
30-
<div className="w-full h-full px-4 bg-zinc-100 dark:bg-zinc-900">
31-
<HomeSidebar className="py-4" />
30+
<div className="w-full h-full bg-zinc-100 dark:bg-zinc-900">
31+
<HomeSidebar className="px-4 py-4" />
3232
</div>
3333
</Drawer>
3434
</>

‎web/src/components/MemoFilters.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const MemoFilters = () => {
7272
}
7373

7474
return (
75-
<div className="w-full mt-3 flex flex-row justify-start items-center flex-wrap gap-x-2 gap-y-1">
75+
<div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-x-2 gap-y-1">
7676
{filters.map((filter) => (
7777
<div
7878
key={getMemoFilterKey(filter)}

‎web/src/components/Navigation.tsx

+3-29
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Tooltip } from "@mui/joy";
2-
import { ArchiveIcon, BellIcon, Globe2Icon, HomeIcon, LogInIcon, PaperclipIcon, SettingsIcon, SmileIcon, User2Icon } from "lucide-react";
2+
import { ArchiveIcon, BellIcon, PaperclipIcon, SettingsIcon, SmileIcon } from "lucide-react";
33
import { observer } from "mobx-react-lite";
44
import { useEffect } from "react";
55
import { NavLink } from "react-router-dom";
@@ -37,30 +37,12 @@ const Navigation = observer((props: Props) => {
3737
userStore.fetchInboxes();
3838
}, []);
3939

40-
const homeNavLink: NavLinkItem = {
41-
id: "header-home",
42-
path: Routes.ROOT,
43-
title: t("common.home"),
44-
icon: <HomeIcon className="w-6 h-auto opacity-70 shrink-0" />,
45-
};
4640
const resourcesNavLink: NavLinkItem = {
4741
id: "header-resources",
4842
path: Routes.RESOURCES,
4943
title: t("common.resources"),
5044
icon: <PaperclipIcon className="w-6 h-auto opacity-70 shrink-0" />,
5145
};
52-
const exploreNavLink: NavLinkItem = {
53-
id: "header-explore",
54-
path: Routes.EXPLORE,
55-
title: t("common.explore"),
56-
icon: <Globe2Icon className="w-6 h-auto opacity-70 shrink-0" />,
57-
};
58-
const profileNavLink: NavLinkItem = {
59-
id: "header-profile",
60-
path: user ? `/u/${encodeURIComponent(user.username)}` : "",
61-
title: t("common.profile"),
62-
icon: <User2Icon className="w-6 h-auto opacity-70 shrink-0" />,
63-
};
6446
const inboxNavLink: NavLinkItem = {
6547
id: "header-inbox",
6648
path: Routes.INBOX,
@@ -86,29 +68,21 @@ const Navigation = observer((props: Props) => {
8668
title: t("common.settings"),
8769
icon: <SettingsIcon className="w-6 h-auto opacity-70 shrink-0" />,
8870
};
89-
const signInNavLink: NavLinkItem = {
90-
id: "header-auth",
91-
path: Routes.AUTH,
92-
title: t("common.sign-in"),
93-
icon: <LogInIcon className="w-6 h-auto opacity-70 shrink-0" />,
94-
};
9571
const aboutNavLink: NavLinkItem = {
9672
id: "header-about",
9773
path: Routes.ABOUT,
9874
title: t("common.about"),
9975
icon: <SmileIcon className="w-6 h-auto opacity-70 shrink-0" />,
10076
};
10177

102-
const navLinks: NavLinkItem[] = user
103-
? [homeNavLink, resourcesNavLink, exploreNavLink, profileNavLink, inboxNavLink, archivedNavLink, settingNavLink]
104-
: [exploreNavLink, signInNavLink, aboutNavLink];
78+
const navLinks: NavLinkItem[] = user ? [resourcesNavLink, inboxNavLink, archivedNavLink, settingNavLink] : [aboutNavLink];
10579

10680
return (
10781
<header
10882
className={cn("w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar", className)}
10983
>
11084
<UserBanner collapsed={collapsed} />
111-
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
85+
<div className="w-full mt-2 px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
11286
{navLinks.map((navLink) => (
11387
<NavLink
11488
className={({ isActive }) =>

‎web/src/components/NavigationDrawer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const NavigationDrawer = () => {
2727
<MenuIcon className="w-5 h-auto dark:text-gray-400" />
2828
</Button>
2929
<Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
30-
<div className="w-full h-full overflow-auto px-4 bg-zinc-100 dark:bg-zinc-900">
30+
<div className="w-full h-full overflow-auto px-2 bg-zinc-100 dark:bg-zinc-900">
3131
<Navigation />
3232
</div>
3333
</Drawer>

‎web/src/components/SearchBar.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@ const SearchBar = () => {
3131

3232
return (
3333
<div className="relative w-full h-auto flex flex-row justify-start items-center">
34-
<SearchIcon className="absolute left-3 w-4 h-auto opacity-40" />
34+
<SearchIcon className="absolute left-2 w-4 h-auto opacity-40" />
3535
<input
36-
className="w-full text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 border dark:border-zinc-800 text-sm leading-7 rounded-lg p-1 pl-8 outline-none"
36+
className="w-full text-gray-500 leading-6 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 border dark:border-zinc-800 text-sm rounded-xl p-1 pl-8 outline-none"
3737
placeholder={t("memo.search-placeholder")}
3838
value={queryText}
3939
onChange={onTextChange}
4040
onKeyDown={onKeyDown}
4141
/>
42-
<MemoDisplaySettingMenu className="absolute right-3 top-3" />
42+
<MemoDisplaySettingMenu className="absolute right-2 top-2.5" />
4343
</div>
4444
);
4545
};

‎web/src/components/StatisticsView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const StatisticsView = () => {
6060
showMonthYearPicker
6161
showFullMonthYearPicker
6262
customInput={
63-
<span className="cursor-pointer text-base md:text-lg hover:text-gray-600 dark:hover:text-gray-300">
63+
<span className="cursor-pointer text-base hover:text-gray-600 dark:hover:text-gray-300">
6464
{dayjs(visibleMonthString).toDate().toLocaleString(i18n.language, { year: "numeric", month: "long" })}
6565
</span>
6666
}

‎web/src/components/UserBanner.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
2-
import { LogOutIcon, SmileIcon } from "lucide-react";
2+
import { LogOutIcon, SmileIcon, User2Icon } from "lucide-react";
33
import { authServiceClient } from "@/grpcweb";
44
import useCurrentUser from "@/hooks/useCurrentUser";
55
import useNavigateTo from "@/hooks/useNavigateTo";
@@ -17,10 +17,10 @@ const UserBanner = (props: Props) => {
1717
const { collapsed } = props;
1818
const t = useTranslate();
1919
const navigateTo = useNavigateTo();
20-
const user = useCurrentUser();
20+
const currentUser = useCurrentUser();
2121
const workspaceGeneralSetting = workspaceStore.state.generalSetting;
22-
const title = (user ? user.nickname || user.username : workspaceGeneralSetting.customProfile?.title) || "Memos";
23-
const avatarUrl = (user ? user.avatarUrl : workspaceGeneralSetting.customProfile?.logoUrl) || "/full-logo.webp";
22+
const title = (currentUser ? currentUser.nickname || currentUser.username : workspaceGeneralSetting.customProfile?.title) || "Memos";
23+
const avatarUrl = (currentUser ? currentUser.avatarUrl : workspaceGeneralSetting.customProfile?.logoUrl) || "/full-logo.webp";
2424

2525
const handleSignOut = async () => {
2626
await authServiceClient.signOut({});
@@ -30,10 +30,10 @@ const UserBanner = (props: Props) => {
3030
return (
3131
<div className="relative w-full h-auto px-1 shrink-0">
3232
<Dropdown>
33-
<MenuButton disabled={!user} slots={{ root: "div" }}>
33+
<MenuButton disabled={!currentUser} slots={{ root: "div" }}>
3434
<div
3535
className={cn(
36-
"py-1 w-auto flex flex-row justify-start items-center cursor-pointer text-gray-800 dark:text-gray-400",
36+
"w-auto flex flex-row justify-start items-center cursor-pointer text-gray-800 dark:text-gray-400",
3737
collapsed ? "px-1" : "px-3",
3838
)}
3939
>
@@ -42,6 +42,10 @@ const UserBanner = (props: Props) => {
4242
</div>
4343
</MenuButton>
4444
<Menu placement="bottom-start" style={{ zIndex: "9999" }}>
45+
<MenuItem onClick={() => navigateTo(`/u/${encodeURIComponent(currentUser.username)}`)}>
46+
<User2Icon className="w-4 h-auto opacity-60" />
47+
<span className="truncate">{t("common.profile")}</span>
48+
</MenuItem>
4549
<MenuItem onClick={handleSignOut}>
4650
<LogOutIcon className="w-4 h-auto opacity-60" />
4751
<span className="truncate">{t("common.sign-out")}</span>

‎web/src/layouts/HomeLayout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ const HomeLayout = observer(() => {
2121
className={cn(
2222
"sticky top-0 left-0 shrink-0 h-[100svh] transition-all",
2323
"border-r border-gray-200 dark:border-zinc-800",
24-
lg ? "px-5 w-72" : "px-4 w-56",
24+
lg ? "w-72" : "w-56",
2525
)}
2626
>
27-
<HomeSidebar className={cn("py-6")} />
27+
<HomeSidebar className={cn("px-3 py-6")} />
2828
</div>
2929
)}
3030
<div className={cn("w-full mx-auto px-4 sm:px-6 sm:pt-3 md:pt-6 pb-8", md && "max-w-3xl")}>

‎web/src/pages/UserProfile.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { toast } from "react-hot-toast";
77
import { useParams } from "react-router-dom";
88
import MemoFilters from "@/components/MemoFilters";
99
import MemoView from "@/components/MemoView";
10-
import MobileHeader from "@/components/MobileHeader";
1110
import PagedMemoList from "@/components/PagedMemoList";
1211
import UserAvatar from "@/components/UserAvatar";
1312
import useLoading from "@/hooks/useLoading";
@@ -77,8 +76,7 @@ const UserProfile = () => {
7776
};
7877

7978
return (
80-
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
81-
<MobileHeader />
79+
<section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center pb-8">
8280
<div className="w-full px-4 sm:px-6 flex flex-col justify-start items-center">
8381
{!loadingState.isLoading &&
8482
(user ? (

0 commit comments

Comments
 (0)