feature/adds-admin-add-article #1
@@ -6,6 +6,7 @@ export type HeaderLinksProps = {
|
|||||||
href: string;
|
href: string;
|
||||||
label: string;
|
label: string;
|
||||||
condition: boolean;
|
condition: boolean;
|
||||||
|
active?: boolean;
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -26,7 +27,7 @@ export const BaseDesktopHeader = ({
|
|||||||
<Link
|
<Link
|
||||||
key={link.href}
|
key={link.href}
|
||||||
href={link.href}
|
href={link.href}
|
||||||
className='text-xl font-normal transition-colors hover:font-bold hover:text-primary'
|
className={`text-xl font-normal transition-colors hover:font-bold hover:text-primary${link.active ? ' underline underline-offset-4' : ''}`}
|
||||||
>
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -4,8 +4,11 @@ import { getSessionData } from '@/lib/session/session-storage';
|
|||||||
import { BaseDesktopHeader } from '@/ui/components/internal/header/desktop-header/base-desktop-header';
|
import { BaseDesktopHeader } from '@/ui/components/internal/header/desktop-header/base-desktop-header';
|
||||||
import { UserButton } from '@/ui/components/internal/user-profile/user-profile-button';
|
import { UserButton } from '@/ui/components/internal/user-profile/user-profile-button';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
export const DynamicDesktopHeader = () => {
|
export const DynamicDesktopHeader = () => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
const { data: sessionData } = useQuery({
|
const { data: sessionData } = useQuery({
|
||||||
queryKey: ['sessionData'],
|
queryKey: ['sessionData'],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
@@ -15,9 +18,9 @@ export const DynamicDesktopHeader = () => {
|
|||||||
const user = sessionData?.user;
|
const user = sessionData?.user;
|
||||||
|
|
||||||
const links = [
|
const links = [
|
||||||
{ href: '/home', label: 'Home', condition: true },
|
{ href: '/home', label: 'Home', condition: true, active: pathname === '/home' },
|
||||||
{ href: '/about', label: 'About', condition: true },
|
{ href: '/about', label: 'About', condition: true, active: pathname === '/about' },
|
||||||
{ href: '/admin', label: 'Admin', condition: !!user },
|
{ href: '/admin', label: 'Admin', condition: !!user, active: pathname === '/admin' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const userButton = !!user ? <UserButton user={user} /> : <div />;
|
const userButton = !!user ? <UserButton user={user} /> : <div />;
|
||||||
|
|||||||
Reference in New Issue
Block a user