mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
added active link
This commit is contained in:
parent
ca3ee550f7
commit
66e45937de
25
src/components/activeLink.tsx
Normal file
25
src/components/activeLink.tsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useSelectedLayoutSegment } from 'next/navigation';
|
||||||
|
|
||||||
|
export const ActiveLink = ({
|
||||||
|
href,
|
||||||
|
className,
|
||||||
|
activeClassName,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
href: string;
|
||||||
|
className: string;
|
||||||
|
activeClassName: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
const segment = useSelectedLayoutSegment();
|
||||||
|
const isActive = href.includes(segment);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
@ -1,8 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
|
import { ActiveLink } from '@components/activeLink';
|
||||||
|
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||||
import { NavArrowUp } from 'iconoir-react';
|
import { NavArrowUp } from 'iconoir-react';
|
||||||
import Link from 'next/link';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|
||||||
export default function Newsfeed() {
|
export default function Newsfeed() {
|
||||||
@ -22,20 +23,20 @@ export default function Newsfeed() {
|
|||||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
|
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
|
||||||
</Collapsible.Trigger>
|
</Collapsible.Trigger>
|
||||||
<Collapsible.Content className="flex flex-col text-zinc-400">
|
<Collapsible.Content className="flex flex-col text-zinc-400">
|
||||||
<Link
|
<ActiveLink
|
||||||
href={`/newsfeed/following`}
|
href="/newsfeed/following"
|
||||||
//activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
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"
|
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||||
>
|
>
|
||||||
<span>Following</span>
|
<span>Following</span>
|
||||||
</Link>
|
</ActiveLink>
|
||||||
<Link
|
<ActiveLink
|
||||||
href={`/newsfeed/circle`}
|
href="/newsfeed/circle"
|
||||||
//activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
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"
|
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||||
>
|
>
|
||||||
<span>Circle</span>
|
<span>Circle</span>
|
||||||
</Link>
|
</ActiveLink>
|
||||||
</Collapsible.Content>
|
</Collapsible.Content>
|
||||||
</div>
|
</div>
|
||||||
</Collapsible.Root>
|
</Collapsible.Root>
|
||||||
|
Loading…
Reference in New Issue
Block a user