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

chore: tweak navigation styles

Browse Source
This commit is contained in:
Steven 2024-01-06 19:12:26 +08:00
parent 4c59035757
commit 83141f9be2
4 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/components/Navigation.tsx
View File

@ -15,7 +15,11 @@ interface NavLinkItem {
icon: React.ReactNode;
}
const Navigation = () => {
interface Props {
className?: string;
}
const Navigation = (props: Props) => {
const t = useTranslate();
const user = useCurrentUser();
const inboxStore = useInboxStore();
@ -110,7 +114,12 @@ const Navigation = () => {
: [exploreNavLink, signInNavLink, aboutNavLink];
return (
<header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30">
<header
className={classNames(
"w-full h-full overflow-auto flex flex-col justify-start items-start py-4 md:pt-6 z-30 hide-scrollbar",
props.className
)}
>
<UserBanner />
<div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
{navLinks.map((navLink) => (

2
web/src/components/UserBanner.tsx
View File

@ -23,7 +23,7 @@ const UserBanner = () => {
<Dropdown
className="w-auto inline-flex"
trigger={
<div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
<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">
<UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
<span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
</div>

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

@ -11,8 +11,8 @@ function Root() {
<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">
{sm && (
<div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 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">
<Navigation />
<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">
<Navigation className="px-4" />
</div>
)}
<main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">

12
web/src/pages/About.tsx
View File

@ -8,22 +8,24 @@ const About = () => {
<MobileHeader />
<div className="w-full px-4 sm:px-6">
<div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
<img className="w-auto h-12" src="https://www.usememos.com/full-logo-landscape.png" alt="" />
<a href="https://www.usememos.com" target="_blank">
<img className="w-auto h-12" src="https://www.usememos.com/full-logo-landscape.png" alt="memos" />
</a>
<p className="text-base">A privacy-first, lightweight note-taking service. Easily capture and share your great thoughts.</p>
<div className="mt-1 flex flex-row items-center flex-wrap">
<Link underline="always" href="https://github.com/usememos/memos">
<Link underline="always" href="https://www.github.com/usememos/memos" target="_blank">
GitHub Repo
</Link>
<Icon.Dot className="w-4 h-auto opacity-60" />
<Link underline="always" href="https://www.usememos.com/">
<Link underline="always" href="https://www.usememos.com/" target="_blank">
Offical Website
</Link>
<Icon.Dot className="w-4 h-auto opacity-60" />
<Link underline="always" href="https://www.usememos.com/blog">
<Link underline="always" href="https://www.usememos.com/blog" target="_blank">
Blogs
</Link>
<Icon.Dot className="w-4 h-auto opacity-60" />
<Link underline="always" href="https://www.usememos.com/blog">
<Link underline="always" href="https://www.usememos.com/docs" target="_blank">
Documents
</Link>
</div>