reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign navigation bar

Browse Source
This commit is contained in:
reya
2024-01-10 13:57:44 +07:00
parent f2504071cd
commit a5ad4fe05c
17 changed files with 274 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
packages/ui/src/navigation.tsx
View File

@@ -1,34 +1,52 @@
import {
ComposeFilledIcon,
ComposeIcon,
DepotFilledIcon,
DepotIcon,
HomeFilledIcon,
HomeIcon,
NwcFilledIcon,
NwcIcon,
PlusIcon,
RelayFilledIcon,
RelayIcon,
SettingsFilledIcon,
SettingsIcon,
} from "@lume/icons";
import { cn, editorAtom } from "@lume/utils";
import { useSetAtom } from "jotai";
import { useAtom } from "jotai";
import { useHotkeys } from "react-hotkeys-hook";
import { NavLink } from "react-router-dom";
import { ActiveAccount } from "./account/active";
export function Navigation() {
const setIsEditorOpen = useSetAtom(editorAtom);
const [isEditorOpen, setIsEditorOpen] = useAtom(editorAtom);
useHotkeys("meta+n", () => setIsEditorOpen((state) => !state), []);
return (
<div className="flex flex-col justify-between w-20 h-full px-4 py-3 shrink-0">
<div className="flex flex-col flex-1 gap-5">
<NavLink
to="/"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div className="flex flex-col flex-1">
<div className="flex flex-col gap-3">
<ActiveAccount />
<button
type="button"
onClick={() => setIsEditorOpen((prev) => !prev)}
className="flex items-center justify-center h-auto w-full text-black aspect-square rounded-xl bg-black/5 hover:bg-blue-500 hover:text-white dark:bg-white/5 dark:text-white dark:hover:bg-blue-500"
>
{isEditorOpen ? (
<ComposeFilledIcon className="size-5" />
) : (
<ComposeIcon className="size-5" />
)}
</button>
</div>
<div className="my-5 w-2/3 mx-auto h-px bg-black/10 dark:bg-white/10" />
<div className="flex flex-col gap-2">
<NavLink
to="/"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -38,31 +56,19 @@ export function Navigation() {
)}
>
{isActive ? (
<HomeFilledIcon className="text-black size-6 dark:text-white" />
<HomeFilledIcon className="size-6" />
) : (
<HomeIcon className="size-6" />
)}
</div>
<div
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Home
</div>
</>
)}
</NavLink>
<NavLink
to="/relays"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
)}
</NavLink>
<NavLink
to="/relays"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -77,26 +83,14 @@ export function Navigation() {
<RelayIcon className="size-6" />
)}
</div>
<div
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Relays
</div>
</>
)}
</NavLink>
<NavLink
to="/depot"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
)}
</NavLink>
<NavLink
to="/depot"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -111,26 +105,14 @@ export function Navigation() {
<DepotIcon className="size-6" />
)}
</div>
<div
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Depot
</div>
</>
)}
</NavLink>
<NavLink
to="/nwc"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
)}
</NavLink>
<NavLink
to="/nwc"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
@@ -139,36 +121,36 @@ export function Navigation() {
: "text-black/50 dark:text-neutral-400",
)}
>
{isActive ? (
<NwcFilledIcon className="text-black size-6 dark:text-white" />
) : (
<NwcIcon className="size-6" />
)}
<NwcIcon className="size-6" />
</div>
<div
className={cn(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Wallet
</div>
</>
)}
</NavLink>
</div>
</div>
<div className="flex flex-col">
<NavLink
to="/settings"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<div
className={cn(
"inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl",
isActive
? "bg-black/10 text-black dark:bg-white/10 dark:text-white"
: "text-black/50 dark:text-neutral-400",
)}
>
{isActive ? (
<SettingsFilledIcon className="size-6" />
) : (
<SettingsIcon className="size-6" />
)}
</div>
)}
</NavLink>
</div>
<div className="flex flex-col gap-3 p-1 shrink-0">
<button
type="button"
onClick={() => setIsEditorOpen((prev) => !prev)}
className="flex items-center justify-center w-full h-auto text-black aspect-square rounded-xl bg-black/10 hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:text-white dark:hover:bg-blue-500"
>
<PlusIcon className="w-5 h-5" />
</button>
<ActiveAccount />
</div>
</div>
);
}