66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import {
|
|
Icon2fa,
|
|
IconBellRinging,
|
|
IconDatabaseImport,
|
|
IconFingerprint,
|
|
IconKey,
|
|
IconLogout,
|
|
IconReceipt2,
|
|
IconSettings,
|
|
IconSwitchHorizontal,
|
|
} from '@tabler/icons-react';
|
|
import { Code, Group } from '@pikku/mantine/core';
|
|
import classes from './NavbarSimple.module.css';
|
|
|
|
const data = [
|
|
{ link: '', label: 'Notifications', icon: IconBellRinging },
|
|
{ link: '', label: 'Billing', icon: IconReceipt2 },
|
|
{ link: '', label: 'Security', icon: IconFingerprint },
|
|
{ link: '', label: 'SSH Keys', icon: IconKey },
|
|
{ link: '', label: 'Databases', icon: IconDatabaseImport },
|
|
{ link: '', label: 'Authentication', icon: Icon2fa },
|
|
{ link: '', label: 'Other Settings', icon: IconSettings },
|
|
];
|
|
|
|
export function NavbarSimple() {
|
|
const [active, setActive] = useState('Billing');
|
|
|
|
const links = data.map((item) => (
|
|
<a
|
|
className={classes.link}
|
|
data-active={item.label === active || undefined}
|
|
href={item.link}
|
|
key={item.label}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
setActive(item.label);
|
|
}}
|
|
>
|
|
<item.icon className={classes.linkIcon} stroke={1.5} />
|
|
<span>{item.label}</span>
|
|
</a>
|
|
));
|
|
|
|
return (
|
|
<nav className={classes.navbar}>
|
|
<div className={classes.navbarMain}>
|
|
<Group className={classes.header} justify="space-between">
|
|
</Group>
|
|
{links}
|
|
</div>
|
|
|
|
<div className={classes.footer}>
|
|
<a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
|
|
<IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
|
|
<span>Change account</span>
|
|
</a>
|
|
|
|
<a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
|
|
<IconLogout className={classes.linkIcon} stroke={1.5} />
|
|
<span>Logout</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |