Manuel Bustillo
82f9cf8e4b
Some checks failed
Build Nginx-based docker image / build-static-assets (push) Has been cancelled
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m20s
Add copyright notice / copyright_notice (pull_request) Successful in 1m28s
Playwright Tests / test (pull_request) Successful in 6m58s
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
|
|
'use client'
|
|
|
|
import {
|
|
UserGroupIcon,
|
|
RectangleGroupIcon,
|
|
BanknotesIcon,
|
|
GlobeAltIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import clsx from 'clsx';
|
|
import { getSlug } from '@/app/lib/utils';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
// Map of links to display in the side navigation.
|
|
// Depending on the size of the application, this would be stored in a database.
|
|
|
|
export default function NavLinks() {
|
|
const pathname = usePathname();
|
|
|
|
const [slug, setSlug] = useState<string>("default");
|
|
useEffect(() => { setSlug(getSlug()) }, []);
|
|
|
|
const links = [
|
|
{ name: 'Guests', href: `/${slug}/dashboard/guests`, icon: UserGroupIcon },
|
|
{ name: 'Expenses', href: `/${slug}/dashboard/expenses`, icon: BanknotesIcon },
|
|
{ name: 'Table distributions', href: `/${slug}/dashboard/tables`, icon: RectangleGroupIcon },
|
|
{ name: 'Website builder', href: `/${slug}/dashboard/website`, icon: GlobeAltIcon },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{links.map((link) => {
|
|
const LinkIcon = link.icon;
|
|
return (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className={clsx(
|
|
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
|
|
{
|
|
'bg-sky-100 text-blue-600': pathname === link.href,
|
|
},
|
|
)}
|
|
>
|
|
<LinkIcon className="w-6" />
|
|
<p className="hidden md:block">{link.name}</p>
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|