YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-14 18:30:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update collapse sidebar

Browse Source
This commit is contained in:
Steven 2024-01-27 05:27:42 +08:00
parent b9cbe6626f
commit 4b223c1e4c
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
web/src/layouts/Root.tsx
View File

@ -1,7 +1,9 @@
import { Button, IconButton, Tooltip } from "@mui/joy";
import classNames from "classnames"; 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 useLocalStorage from "react-use/lib/useLocalStorage";
import Icon from "@/components/Icon";
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";
@ -21,12 +23,29 @@ function Root() {
{sm && ( {sm && (
<div <div
className={classNames( 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", "group flex flex-col justify-start items-start 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" collapsed ? "w-16 px-2" : "w-56 px-4"
)} )}
onDoubleClick={() => setCollapsed(!collapsed)}
> >
<Navigation collapsed={collapsed} /> <Navigation className="!h-auto" collapsed={collapsed} />
<div className={classNames("w-full grow h-auto flex flex-col justify-end", collapsed ? "items-center" : "items-start")}>
<div
className={classNames("hidden py-3 group-hover:flex flex-col justify-center items-center")}
onClick={() => setCollapsed(!collapsed)}
>
{!collapsed ? (
<Button variant="plain" color="neutral" startDecorator={<Icon.ChevronLeft className="w-5 h-auto opacity-70" />}>
Collapse
</Button>
) : (
<Tooltip title="Expand" placement="right" arrow>
<IconButton>
<Icon.ChevronRight className="w-5 h-auto opacity-70" />
</IconButton>
</Tooltip>
)}
</div>
</div>
</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">