chore: implement collapsed navigation

pull/2815/head
Steven 1 year ago
parent fae0b4e900
commit 370054e040

@ -381,6 +381,8 @@ const MemoEditor = (props: Props) => {
onFocus={handleEditorFocus} onFocus={handleEditorFocus}
> >
<Editor ref={editorRef} {...editorConfig} /> <Editor ref={editorRef} {...editorConfig} />
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
<RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
<div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}> <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
<div className="flex flex-row justify-start items-center opacity-80"> <div className="flex flex-row justify-start items-center opacity-80">
<TagSelector editorRef={editorRef} /> <TagSelector editorRef={editorRef} />
@ -393,8 +395,6 @@ const MemoEditor = (props: Props) => {
</IconButton> </IconButton>
</div> </div>
</div> </div>
<ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
<RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
<Divider className="!mt-2" /> <Divider className="!mt-2" />
<div className="w-full flex flex-row justify-between items-center py-3 dark:border-t-zinc-500"> <div className="w-full flex flex-row justify-between items-center py-3 dark:border-t-zinc-500">
<div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}> <div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>

@ -1,3 +1,4 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames"; import classNames from "classnames";
import { useEffect } from "react"; import { useEffect } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
@ -16,10 +17,12 @@ interface NavLinkItem {
} }
interface Props { interface Props {
collapsed?: boolean;
className?: string; className?: string;
} }
const Navigation = (props: Props) => { const Navigation = (props: Props) => {
const { collapsed, className } = props;
const t = useTranslate(); const t = useTranslate();
const user = useCurrentUser(); const user = useCurrentUser();
const inboxStore = useInboxStore(); const inboxStore = useInboxStore();
@ -45,31 +48,31 @@ const Navigation = (props: Props) => {
id: "header-home", id: "header-home",
path: "/", path: "/",
title: t("common.home"), title: t("common.home"),
icon: <Icon.Home className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Home className="w-6 h-auto opacity-70" />,
}; };
const timelineNavLink: NavLinkItem = { const timelineNavLink: NavLinkItem = {
id: "header-timeline", id: "header-timeline",
path: "/timeline", path: "/timeline",
title: t("timeline.title"), title: t("timeline.title"),
icon: <Icon.GanttChartSquare className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.GanttChartSquare className="w-6 h-auto opacity-70" />,
}; };
const resourcesNavLink: NavLinkItem = { const resourcesNavLink: NavLinkItem = {
id: "header-resources", id: "header-resources",
path: "/resources", path: "/resources",
title: t("common.resources"), title: t("common.resources"),
icon: <Icon.Paperclip className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Paperclip className="w-6 h-auto opacity-70" />,
}; };
const exploreNavLink: NavLinkItem = { const exploreNavLink: NavLinkItem = {
id: "header-explore", id: "header-explore",
path: "/explore", path: "/explore",
title: t("common.explore"), title: t("common.explore"),
icon: <Icon.Globe2 className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Globe2 className="w-6 h-auto opacity-70" />,
}; };
const profileNavLink: NavLinkItem = { const profileNavLink: NavLinkItem = {
id: "header-profile", id: "header-profile",
path: user ? `/u/${encodeURIComponent(user.username)}` : "", path: user ? `/u/${encodeURIComponent(user.username)}` : "",
title: t("common.profile"), title: t("common.profile"),
icon: <Icon.User2 className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.User2 className="w-6 h-auto opacity-70" />,
}; };
const inboxNavLink: NavLinkItem = { const inboxNavLink: NavLinkItem = {
id: "header-inbox", id: "header-inbox",
@ -78,7 +81,7 @@ const Navigation = (props: Props) => {
icon: ( icon: (
<> <>
<div className="relative"> <div className="relative">
<Icon.Bell className="mr-3 w-6 h-auto opacity-70" /> <Icon.Bell className="w-6 h-auto opacity-70" />
{hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>} {hasUnreadInbox && <div className="absolute top-0 left-5 w-2 h-2 rounded-full bg-blue-500"></div>}
</div> </div>
</> </>
@ -88,25 +91,25 @@ const Navigation = (props: Props) => {
id: "header-archived", id: "header-archived",
path: "/archived", path: "/archived",
title: t("common.archived"), title: t("common.archived"),
icon: <Icon.Archive className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Archive className="w-6 h-auto opacity-70" />,
}; };
const settingNavLink: NavLinkItem = { const settingNavLink: NavLinkItem = {
id: "header-setting", id: "header-setting",
path: "/setting", path: "/setting",
title: t("common.settings"), title: t("common.settings"),
icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Settings className="w-6 h-auto opacity-70" />,
}; };
const signInNavLink: NavLinkItem = { const signInNavLink: NavLinkItem = {
id: "header-auth", id: "header-auth",
path: "/auth", path: "/auth",
title: t("common.sign-in"), title: t("common.sign-in"),
icon: <Icon.LogIn className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.LogIn className="w-6 h-auto opacity-70" />,
}; };
const aboutNavLink: NavLinkItem = { const aboutNavLink: NavLinkItem = {
id: "header-about", id: "header-about",
path: "/about", path: "/about",
title: t("common.about"), title: t("common.about"),
icon: <Icon.Smile className="mr-3 w-6 h-auto opacity-70" />, icon: <Icon.Smile className="w-6 h-auto opacity-70" />,
}; };
const navLinks: NavLinkItem[] = user const navLinks: NavLinkItem[] = user
@ -117,16 +120,17 @@ const Navigation = (props: Props) => {
<header <header
className={classNames( className={classNames(
"w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar", "w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
props.className className
)} )}
> >
<UserBanner /> <UserBanner collapsed={collapsed} />
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2"> <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{navLinks.map((navLink) => ( {navLinks.map((navLink) => (
<NavLink <NavLink
className={({ isActive }) => className={({ isActive }) =>
classNames( classNames(
"w-full px-4 pr-5 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800", "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800",
collapsed ? "" : "w-full px-4",
isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent" isActive ? "bg-white drop-shadow-sm dark:bg-zinc-800 border-gray-200 dark:border-zinc-700" : "border-transparent"
) )
} }
@ -135,9 +139,14 @@ const Navigation = (props: Props) => {
id={navLink.id} id={navLink.id}
unstable_viewTransition unstable_viewTransition
> >
<> {props.collapsed ? (
{navLink.icon} {navLink.title} <Tooltip title={navLink.title} placement="right" arrow>
</> <div>{navLink.icon}</div>
</Tooltip>
) : (
navLink.icon
)}
{!props.collapsed && <span className="ml-3">{navLink.title}</span>}
</NavLink> </NavLink>
))} ))}
</div> </div>

@ -1,12 +1,18 @@
import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
import classNames from "classnames";
import * as api from "@/helpers/api"; import * as api from "@/helpers/api";
import useCurrentUser from "@/hooks/useCurrentUser"; import useCurrentUser from "@/hooks/useCurrentUser";
import { useGlobalStore } from "@/store/module"; import { useGlobalStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
import Icon from "./Icon"; import Icon from "./Icon";
import UserAvatar from "./UserAvatar"; import UserAvatar from "./UserAvatar";
import Dropdown from "./kit/Dropdown";
const UserBanner = () => { interface Props {
collapsed?: boolean;
}
const UserBanner = (props: Props) => {
const { collapsed } = props;
const t = useTranslate(); const t = useTranslate();
const globalStore = useGlobalStore(); const globalStore = useGlobalStore();
const { systemStatus } = globalStore.state; const { systemStatus } = globalStore.state;
@ -20,32 +26,26 @@ const UserBanner = () => {
}; };
return ( return (
<div className="relative w-full h-auto px-1 shrink-0"> <div className="relative w-auto h-auto px-1 shrink-0">
<Dropdown <Dropdown>
className="w-auto inline-flex" <MenuButton slots={{ root: "div" }}>
trigger={ <div
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-300 hover:bg-white hover:border-gray-200 dark:hover:border-zinc-700 dark:hover:bg-zinc-800"> className={classNames(
<UserAvatar className="shadow shrink-0 mr-2" avatarUrl={avatarUrl} /> "py-1 my-1 w-auto flex flex-row justify-start items-center cursor-pointer rounded-2xl border border-transparent text-gray-800 dark:text-gray-300",
<span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span> collapsed ? "px-1" : "px-3"
</div> )}
}
disabled={user == undefined}
actionsClassName="min-w-[128px] max-w-full"
positionClassName="top-full mt-2"
actions={
<>
{user != undefined && (
<button
className="w-full px-3 truncate text-left leading-10 cursor-pointer rounded flex flex-row justify-start items-center dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-zinc-800"
onClick={handleSignOut}
> >
<Icon.LogOut className="w-5 h-auto mr-1 opacity-60 shrink-0" /> <UserAvatar className="shadow shrink-0" avatarUrl={avatarUrl} />
{!collapsed && <span className="ml-2 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>}
</div>
</MenuButton>
<Menu placement="bottom-start">
<MenuItem onClick={handleSignOut}>
<Icon.LogOut className="w-5 h-auto opacity-60 shrink-0" />
<span className="truncate">{t("common.sign-out")}</span> <span className="truncate">{t("common.sign-out")}</span>
</button> </MenuItem>
)} </Menu>
</> </Dropdown>
}
/>
</div> </div>
); );
}; };

@ -1,18 +1,32 @@
import classNames from "classnames";
import { Suspense } from "react"; import { Suspense } from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import useLocalStorage from "react-use/lib/useLocalStorage";
import Navigation from "@/components/Navigation"; import Navigation from "@/components/Navigation";
import useResponsiveWidth from "@/hooks/useResponsiveWidth"; import useResponsiveWidth from "@/hooks/useResponsiveWidth";
import Loading from "@/pages/Loading"; import Loading from "@/pages/Loading";
function Root() { function Root() {
const { sm } = useResponsiveWidth(); const { sm } = useResponsiveWidth();
const [collapsed, setCollapsed] = useLocalStorage<boolean>("navigation-collapsed", false);
return ( return (
<div className="w-full min-h-full"> <div className="w-full min-h-full">
<div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start"> <div
className={classNames(
"w-full transition-all mx-auto flex flex-row justify-center items-start",
collapsed ? "sm:pl-16" : "sm:pl-56"
)}
>
{sm && ( {sm && (
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2"> <div
<Navigation className="px-4" /> className={classNames(
"hidden sm:block fixed top-0 left-0 select-none border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40 transition-all hover:shadow-xl z-2",
collapsed ? "w-16 px-2" : "w-56 px-4"
)}
onDoubleClick={() => setCollapsed(!collapsed)}
>
<Navigation collapsed={collapsed} />
</div> </div>
)} )}
<main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center"> <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">

Loading…
Cancel
Save