42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useSelectedLayoutSegment } from 'next/navigation';
|
|
import Icon from '../Icon';
|
|
|
|
export default function Usernav({ isOpen, toggle }: { isOpen: boolean; toggle: () => void }) {
|
|
const segment = useSelectedLayoutSegment();
|
|
|
|
// segment to TitleCase
|
|
const titleCase = (str: string) => {
|
|
return str
|
|
.toLowerCase()
|
|
.split(' ')
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join(' ');
|
|
};
|
|
|
|
return (
|
|
<div className="z-50 flex flex-row items-center justify-between border-b border-solid border-highlight-primary bg-secondary py-4 px-8">
|
|
<div className="flex flex-row items-center space-x-2 sm:space-x-0">
|
|
<div className="flex items-center">
|
|
<button onClick={toggle} className="block sm:hidden">
|
|
{isOpen ? <Icon name="close-line" /> : <Icon name="menu-2-line" />}
|
|
</button>
|
|
</div>
|
|
{segment && (
|
|
<div className="flex items-center justify-center text-highlight-secondary">
|
|
{titleCase(segment)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-row items-center space-x-4">
|
|
<div className="flex items-center justify-center p-1 text-xl">
|
|
<Icon name="flag-line" />
|
|
</div>
|
|
<div className="flex items-center justify-center rounded-full bg-highlight-primary px-4 py-2">
|
|
T
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|