163 lines
4.9 KiB
TypeScript
163 lines
4.9 KiB
TypeScript
import { Head } from 'fresh/runtime.ts';
|
|
|
|
import { User } from '/lib/types.ts';
|
|
|
|
interface Data {
|
|
route: string;
|
|
user?: User;
|
|
}
|
|
|
|
interface MenuItem {
|
|
url: string;
|
|
label: string;
|
|
}
|
|
|
|
export default function Header({ route, user }: Data) {
|
|
const activeClass = 'bg-slate-800 text-white rounded-md px-3 py-2 text-sm font-medium';
|
|
const defaultClass = 'text-slate-300 hover:bg-slate-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium';
|
|
|
|
const mobileActiveClass = 'bg-slate-800 text-white block rounded-md px-3 py-2 text-base font-medium';
|
|
const mobileDefaultClass =
|
|
'text-slate-300 hover:bg-slate-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium';
|
|
|
|
const iconWidthAndHeightInPixels = 20;
|
|
|
|
const menuItems: MenuItem[] = [
|
|
{
|
|
url: '/dashboard',
|
|
label: 'Dashboard',
|
|
},
|
|
{
|
|
url: '/news',
|
|
label: 'News',
|
|
},
|
|
{
|
|
url: '/files',
|
|
label: 'Files',
|
|
},
|
|
{
|
|
url: '/notes',
|
|
label: 'Notes',
|
|
},
|
|
{
|
|
url: '/photos',
|
|
label: 'Photos',
|
|
},
|
|
];
|
|
|
|
if (user) {
|
|
const activeMenu = menuItems.find((menu) => route.startsWith(menu.url));
|
|
|
|
let pageLabel = activeMenu?.label || '404 - Page not found';
|
|
|
|
if (route.startsWith('/news/feeds')) {
|
|
pageLabel = 'News feeds';
|
|
}
|
|
|
|
if (route.startsWith('/settings')) {
|
|
pageLabel = 'Settings';
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{pageLabel} - bewCloud</title>
|
|
</Head>
|
|
<nav class='bg-slate-950'>
|
|
<div class='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
|
|
<div class='flex h-16 items-center justify-between'>
|
|
<div class='flex items-center'>
|
|
<div class='flex-shrink-0'>
|
|
<a href='/'>
|
|
<img class='h-12 w-12 drop-shadow-md' src='/images/logomark.svg' alt='a stylized blue cloud' />
|
|
</a>
|
|
</div>
|
|
<div class='hidden md:block'>
|
|
<div class='ml-10 flex items-center space-x-4'>
|
|
{menuItems.map((menu) => (
|
|
<a href={menu.url} class={route.startsWith(menu.url) ? activeClass : defaultClass}>
|
|
<img
|
|
src={`/images${menu.url}${'.svg'}`}
|
|
alt={menu.label}
|
|
title={menu.label}
|
|
width={iconWidthAndHeightInPixels}
|
|
height={iconWidthAndHeightInPixels}
|
|
class='white'
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='ml-4 flex items-center md:ml-6'>
|
|
<div class='ml-10 flex items-center space-x-4'>
|
|
<span class='mx-2 text-white text-sm'>{user.email}</span>
|
|
<a
|
|
href='/settings'
|
|
class={route.startsWith('/settings') ? activeClass : defaultClass}
|
|
>
|
|
<img
|
|
src='/images/settings.svg'
|
|
alt='Settings'
|
|
title='Settings'
|
|
width={iconWidthAndHeightInPixels}
|
|
height={iconWidthAndHeightInPixels}
|
|
class='white'
|
|
/>
|
|
</a>
|
|
<a
|
|
href='/logout'
|
|
class={defaultClass}
|
|
>
|
|
<img
|
|
src='/images/logout.svg'
|
|
alt='Logout'
|
|
title='Logout'
|
|
width={iconWidthAndHeightInPixels}
|
|
height={iconWidthAndHeightInPixels}
|
|
class='white'
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='md:hidden' id='mobile-menu'>
|
|
<div class='space-y-1 px-2 pb-3 pt-2 sm:px-3'>
|
|
{menuItems.map((menu) => (
|
|
<a href={menu.url} class={route.startsWith(menu.url) ? mobileActiveClass : mobileDefaultClass}>
|
|
{menu.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class='bg-gray-900 shadow-md'>
|
|
<div class='mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8'>
|
|
<h1 class='text-3xl font-bold tracking-tight text-white'>
|
|
{pageLabel}
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<header class='px-4 pt-8 pb-2 max-w-screen-md mx-auto flex flex-col items-center justify-center'>
|
|
<a href='/'>
|
|
<img
|
|
class='mt-6 mb-2 drop-shadow-md'
|
|
src='/images/logo-white.svg'
|
|
width='250'
|
|
height='50'
|
|
alt='the bewCloud logo: a stylized logo'
|
|
/>
|
|
</a>
|
|
</header>
|
|
);
|
|
}
|