Function SideMenu

webapp/src/components/SideMenu.tsx:7–47

()

import {usePathname} from "next/navigation";

export default function SideMenu() {
    const pathname = usePathname();

    const navLinks = [
        {key: 'home', icon: HomeIcon, text: 'Home', href: '/'},
        {key: 'questions', icon: QuestionMarkCircleIcon, text: 'Questions', href: '/questions'},
        {key: 'tags', icon: TagIcon, text: 'Tags', href: '/tags'},
        {key: 'session', icon: UserIcon, text: 'User session', href: '/session'},
        {key: 'profiles', icon: UserGroupIcon, text: 'Profiles', href: '/profiles'},
    ];

    const selectedKey =
        navLinks.find(link => link.href === pathname)?.key ?? null;

    return (
        <Listbox
            aria-label='nav links'
            variant='faded'
            items={navLinks}
            className='sticky top-20 ml-6'
            selectionMode="single"
            selectedKeys={selectedKey ? [selectedKey] : []}
            itemClasses={{
                base: 'data-[selected=true]:text-secondary',
                title: 'text-lg'
            }}
        >
            {({key, href, icon: Icon, text}) => (
                <ListboxItem
                    href={href}
                    aria-labelledby={key}
                    aria-describedby={text}
                    key={key}
                    startContent={<Icon className='h-6'/>}
                >
                    {text}
                </ListboxItem>
            )}
        </Listbox>
    );
}