mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated navigation
This commit is contained in:
Ren Amamiya
parent
383c9e55ac
commit
27082acf5c
@ -56,12 +56,12 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
|
||||
return (
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button className="relative h-11 w-11 rounded-md">
|
||||
<button className="relative h-11 w-11 rounded-lg">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
fill={true}
|
||||
className="rounded-md object-cover"
|
||||
className="rounded-lg object-cover"
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
|
||||
@ -11,12 +11,12 @@ export const InactiveAccount = memo(function InactiveAccount({ user }: { user: a
|
||||
};
|
||||
|
||||
return (
|
||||
<button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-md">
|
||||
<button onClick={() => setCurrentUser()} className="relative h-11 w-11 shrink rounded-lg">
|
||||
<Image
|
||||
src={userData.picture || DEFAULT_AVATAR}
|
||||
alt="user's avatar"
|
||||
fill={true}
|
||||
className="rounded-md object-cover"
|
||||
className="rounded-lg object-cover"
|
||||
priority
|
||||
/>
|
||||
</button>
|
||||
|
||||
@ -38,18 +38,18 @@ export default function MultiAccounts() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-4">
|
||||
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Link
|
||||
href="/explore"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
|
||||
>
|
||||
<LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
<div>{users.map((user) => renderAccount(user))}</div>
|
||||
<Link
|
||||
href="/onboarding"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-200" />
|
||||
</Link>
|
||||
|
||||
25
src/components/navigation/channels.tsx
Normal file
25
src/components/navigation/channels.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Channels() {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<Collapsible.Root open={open} onOpenChange={setOpen}>
|
||||
<div className="flex flex-col gap-1 px-2">
|
||||
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
|
||||
<div
|
||||
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||
open ? 'rotate-180' : ''
|
||||
}`}
|
||||
>
|
||||
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
|
||||
</div>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Channels</h3>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content></Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
}
|
||||
@ -6,21 +6,19 @@ export default function Chats() {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<Collapsible.Root open={open} onOpenChange={setOpen} className="h-full shrink-0">
|
||||
<div className="flex h-full flex-col gap-1 px-2 pb-8">
|
||||
<Collapsible.Root open={open} onOpenChange={setOpen}>
|
||||
<div className="flex flex-col gap-1 px-2">
|
||||
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
|
||||
<div
|
||||
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||
open ? 'rotate-180' : ''
|
||||
}`}
|
||||
>
|
||||
<TriangleUpIcon className="h-4 w-4 text-zinc-500" />
|
||||
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
|
||||
</div>
|
||||
<h3 className="bg-gradient-to-r from-red-300 via-pink-100 to-blue-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
|
||||
Chats
|
||||
</h3>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Chats</h3>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content className="h-full"></Collapsible.Content>
|
||||
<Collapsible.Content></Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import Channels from '@components/navigation/channels';
|
||||
import Chats from '@components/navigation/chats';
|
||||
import Newsfeed from '@components/navigation/newsfeed';
|
||||
|
||||
export default function Navigation() {
|
||||
return (
|
||||
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-4">
|
||||
<div className="relative flex h-full flex-col gap-1 overflow-hidden pt-3">
|
||||
{/* Newsfeed */}
|
||||
<Newsfeed />
|
||||
{/* Channels */}
|
||||
<Channels />
|
||||
{/* Chats */}
|
||||
<Chats />
|
||||
</div>
|
||||
|
||||
@ -12,21 +12,19 @@ export default function Newsfeed() {
|
||||
<div className="flex flex-col gap-1 px-2">
|
||||
<Collapsible.Trigger className="flex cursor-pointer items-center gap-2 px-2 py-1">
|
||||
<div
|
||||
className={`inline-flex h-6 w-6 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||
className={`inline-flex h-5 w-5 transform items-center justify-center transition-transform duration-150 ease-in-out ${
|
||||
open ? 'rotate-180' : ''
|
||||
}`}
|
||||
>
|
||||
<TriangleUpIcon className="h-4 w-4 text-zinc-500" />
|
||||
<TriangleUpIcon className="h-4 w-4 text-zinc-700" />
|
||||
</div>
|
||||
<h3 className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-xs font-bold uppercase tracking-wide text-transparent">
|
||||
Newsfeed
|
||||
</h3>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-zinc-600">Newsfeed</h3>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content className="flex flex-col gap-1 text-zinc-400">
|
||||
<Collapsible.Content className="flex flex-col text-zinc-400">
|
||||
<ActiveLink
|
||||
href={`/newsfeed/following`}
|
||||
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
|
||||
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||
>
|
||||
<div className="inline-flex h-5 w-5 items-center justify-center">
|
||||
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-fuchsia-500 via-purple-300 to-pink-300"></span>
|
||||
@ -35,8 +33,8 @@ export default function Newsfeed() {
|
||||
</ActiveLink>
|
||||
<ActiveLink
|
||||
href={`/newsfeed/circle`}
|
||||
activeClassName="ring-1 ring-white/10 dark:bg-zinc-900 dark:text-white hover:dark:bg-zinc-800"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:bg-zinc-900"
|
||||
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||
>
|
||||
<div className="inline-flex h-5 w-5 items-center justify-center">
|
||||
<span className="h-4 w-3 rounded-sm bg-gradient-to-br from-amber-500 via-orange-200 to-yellow-300"></span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user