popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: navbar layout and styling improvements

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-05-29 16:09:46 +01:00
co-authored by Sisyphus
parent 040a47401e
commit 3aa0814b1a
1 changed files with 47 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/layout/NavBar.svelte
+22 -13
View File
@@ -8,14 +8,15 @@
// Centralized link definition
const links = [
{ href: '/', label: 'Home', showWhen: 'always', width: 'w-12' },
{ href: '/', label: 'Home', showWhen: 'non-admin', width: 'w-12' },
{ href: '/prices', label: 'Price List', showWhen: 'guest', width: 'w-20' },
{ href: '/schedule', label: 'My Schedule', showWhen: 'auth-not-admin', width: 'w-24' },
{ href: '/book', label: 'Book an appointment', showWhen: 'auth', width: 'w-36' },
{ href: '/book', label: 'Book an appointment', showWhen: 'non-admin', width: 'w-36' },
{ href: '/portfolio', label: 'Portfolio', showWhen: 'always', width: 'w-20' },
{ href: '/admin', label: 'Admin Dashboard', showWhen: 'admin', width: 'w-28' },
{ href: '/today', label: 'Today', showWhen: 'admin', width: 'w-28' },
{ href: '/contact', label: 'Contact', showWhen: 'always', width: 'w-16' },
{ href: '/admin/schedule', label: 'Schedule', showWhen: 'admin', width: 'w-20' },
{ href: '/contact', label: 'Contact', showWhen: 'non-admin', width: 'w-16' },
{ href: '/account', label: 'My Account', showWhen: 'auth', width: 'w-24' }
];
@@ -35,11 +36,8 @@
const canShow = (link: { href: string; label: string; showWhen: string; width: string }) => {
if (authStore.isLoading) return true;
// hide booking link for admins
if (link.href === '/book' && authStore.currentUser?.role === 'admin') return false;
if (link.href === '/contact' && authStore.currentUser?.role === 'admin') return false;
if (link.showWhen === 'always') return true;
if (link.showWhen === 'non-admin' && authStore.currentUser?.role !== 'admin') return true;
if (link.showWhen === 'guest' && !authStore.isAuthenticated) return true;
if (link.showWhen === 'auth' && authStore.isAuthenticated) return true;
if (
@@ -147,8 +145,17 @@
class="relative text-gray-600 hover:text-primary"
aria-label="Notifications"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
</svg>
@@ -188,7 +195,7 @@
<!-- Mobile Menu -->
{#if mobileMenuOpen}
<div class="border-b border-gray-200 bg-background md:hidden">
<div class="space-y-1 px-4 pt-2 pb-3">
<div class="space-y-1 px-2 pt-2 pb-3">
{#each links as link}
{#if canShow(link)}
{#if isLoading}
@@ -196,7 +203,7 @@
{:else}
<a
href={link.href}
class="block rounded px-3 py-3 text-center text-primary hover:text-gray-800"
class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
>
{link.label}
</a>
@@ -207,11 +214,13 @@
{#if isAuthenticated}
<a
href="/notifications"
class="flex items-center justify-center gap-2 rounded px-3 py-3 text-primary hover:text-gray-800"
class="flex items-center justify-center gap-2 rounded px-3 py-2 text-primary hover:text-gray-800"
>
<span>Notifications</span>
{#if unreadCount > 0}
<span class="flex h-6 w-6 min-w-6 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
<span
class="flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
>
{unreadCount > 9 ? '9+' : unreadCount}
</span>
{/if}