Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 | 5x 84x 84x 84x 84x 84x 84x 84x 84x 156x 84x 84x 84x 84x | /**
* PublicNavigation Component
* Adapted from BATbern-public Navbar with React Router integration
* Story 5.7: Supports top offset for banners (e.g., preview mode)
*/
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Menu, ChevronDown, LogOut, UserCircle } from 'lucide-react';
import { Button } from '@/components/public/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/public/ui/popover';
import LanguageSwitcher from '@/components/shared/LanguageSwitcher/LanguageSwitcher';
import { ThankOrganizersNavButton } from './ThankOrganizersNavButton';
import { useAuth } from '@/hooks/useAuth';
import { useTranslation } from 'react-i18next';
interface PublicNavigationProps {
/** Top offset in pixels (e.g., when a banner is present above) */
topOffset?: string;
/**
* Event code of the current live/completed event, when the page in view is a thankable
* event (Story 7.4). When set, a compact "Thank the organizers" button shows in the nav.
*/
thankableEventCode?: string;
}
export const PublicNavigation = ({
topOffset = '0px',
thankableEventCode,
}: PublicNavigationProps) => {
const { isAuthenticated, user, signOut } = useAuth();
const { t } = useTranslation('common');
const navigate = useNavigate();
// 2026-05-20 (Q#2 / Q#2b) — "Portal" and "My Sessions" live in the main horizontal
// nav bar (next to Home / About / Past Events), not the user dropdown. Visibility:
// - "Portal" → /dashboard → role-router (Dashboard.tsx) → organizer / partner /
// attendee landing. Shown only when the user holds an *admin* role (organizer or
// partner); for a speaker-only user, Portal would redirect to /speaker-portal/
// dashboard which is the same target as "My Sessions" — redundant, so hidden.
// - "My Sessions" → /speaker-portal/dashboard (the public-styled speaker dashboard).
// Shown only when the user holds the SPEAKER role.
// - Multi-role user (e.g. organizer + speaker) sees BOTH: Portal routes to the
// organizer dashboard (logged-in MUI chrome), My Sessions stays on the public
// view at /speaker-portal/dashboard.
// The route-side fix that lets organizer+speaker users actually reach
// /speaker-portal/dashboard lives in AuthContext.canAccess (Q#2c — flatMap over
// user.roles instead of consulting only the primary role).
// Tolerate legacy callers that supply only the primary `user.role` and not the
// `user.roles` array — fall back to the singular when the array is unset.
const userRoles = user?.roles ?? (user?.role ? [user.role] : []);
const isSpeaker = userRoles.includes('speaker');
// Story 7.6: attendees get a "My Events" link to their event-history dashboard. A
// speaker+attendee user sees BOTH "My Sessions" and "My Events" — the speaker dashboard
// stays their primary surface (precedence), and "My Events" reaches the attendee dashboard.
const isAttendee = userRoles.includes('attendee');
const hasAdminRole = userRoles.includes('organizer') || userRoles.includes('partner');
const initials = user
? (user.username ?? user.email ?? '')
.split(/[.\s_-]/)
.map((p) => p[0] ?? '')
.join('')
.toUpperCase()
.slice(0, 2) || '?'
: '';
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const closeMobileMenu = () => setMobileMenuOpen(false);
const handleLogout = async () => {
closeMobileMenu();
await signOut();
navigate('/', { replace: true });
};
return (
<>
<nav
style={{ top: topOffset }}
className="fixed left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border"
>
<div className="w-full px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-24">
{/* Logo */}
<div className="flex-shrink-0">
<Link to="/" className="flex items-center">
<img
src="/BATbern_color_logo.svg"
alt="BATbern"
width={189}
height={80}
className="h-20 w-auto"
/>
</Link>
</div>
{/* Primary Navigation - Center (desktop) */}
<div className="hidden md:flex items-center space-x-8">
<Link to="/" className="text-foreground/80 hover:text-foreground transition-colors">
{t('navigation.home')}
</Link>
<Link
to="/about"
className="text-foreground/80 hover:text-foreground transition-colors"
>
{t('navigation.about')}
</Link>
<Link
to="/archive"
className="text-foreground/80 hover:text-foreground transition-colors"
>
{t('navigation.pastEvents')}
</Link>
{/* 2026-05-20 (Q#2b) — role-aware nav items hoisted out of the user dropdown
so they live in the main nav bar alongside Home / About / Past Events. */}
{isAuthenticated && hasAdminRole && (
<Link
to="/dashboard"
className="text-foreground/80 hover:text-foreground transition-colors"
data-testid="public-nav-portal"
>
{t('public.goToPortal')}
</Link>
)}
{isAuthenticated && isSpeaker && (
<Link
to="/speaker-portal/dashboard"
className="text-foreground/80 hover:text-foreground transition-colors"
data-testid="public-nav-my-sessions"
>
{t('navigation.mySessions', 'My Sessions')}
</Link>
)}
{isAuthenticated && isAttendee && (
<Link
to="/attendee/dashboard"
className="text-foreground/80 hover:text-foreground transition-colors"
data-testid="public-nav-my-events"
>
{t('navigation.myEvents', 'My Events')}
</Link>
)}
</div>
{/* CTA Buttons - Right (desktop) */}
<div className="hidden md:flex items-center gap-3">
{/* Thank the organizers — Story 7.4: only on a live/completed event page */}
{thankableEventCode && <ThankOrganizersNavButton eventCode={thankableEventCode} />}
{isAuthenticated ? (
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
className="flex items-center gap-2 px-3"
data-testid="public-nav-user-menu"
>
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold leading-none">
{initials}
</span>
<ChevronDown className="h-4 w-4 text-foreground/60" />
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="w-64 p-2">
<div className="flex flex-col gap-1">
{/* 2026-05-20 (Q#2b) — Portal + My Sessions moved out to the main
nav bar above. The dropdown is now secondary actions only:
My Profile, language switcher, logout.
2026-06-05 — My Profile shown to EVERY authenticated user (the
role-neutral /profile page serves all roles since Story 12.11;
canAccess allows '/profile' for all four roles). */}
<Link
to="/profile"
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors"
>
<UserCircle className="h-4 w-4" />
{t('navigation.myProfile', 'My Profile')}
</Link>
<div className="py-1 px-1">
<LanguageSwitcher />
</div>
<button
onClick={handleLogout}
className="flex items-center gap-2 rounded-md px-3 py-2 text-sm text-red-400 hover:bg-accent hover:text-red-300 transition-colors w-full text-left"
>
<LogOut className="h-4 w-4" />
{t('menu.logout')}
</button>
</div>
</PopoverContent>
</Popover>
) : (
<>
<Button variant="secondary" asChild>
<Link to="/auth/login">{t('public.login')}</Link>
</Button>
<Button asChild>
<Link to="/auth/register">{t('public.joinUp')}</Link>
</Button>
</>
)}
</div>
{/* Hamburger Button - Mobile only */}
<button
className="md:hidden p-2 text-foreground/80 hover:text-foreground transition-colors"
onClick={() => setMobileMenuOpen((prev) => !prev)}
aria-label={t('navigation.openMenu')}
>
<Menu className="h-6 w-6" />
</button>
</div>
</div>
</nav>
{/* Overlay */}
<div
className={`fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 ${
mobileMenuOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}
onClick={closeMobileMenu}
aria-hidden="true"
/>
{/* Slide-in panel — starts below navbar, height fits content */}
<div
className={`fixed top-24 right-0 z-50 w-72 bg-background border border-border rounded-bl-lg shadow-xl flex flex-col transition-transform duration-300 ease-in-out ${
mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'
}`}
aria-hidden={!mobileMenuOpen}
>
{/* Nav links — Portal + My Sessions live here (2026-05-20 Q#2b) so the mobile
slide-in matches the desktop bar layout. Visibility rules mirror the desktop
block: Portal for admin roles, My Sessions for the speaker role. */}
<nav className="flex flex-col gap-1 p-4">
<Link
to="/"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
>
{t('navigation.home')}
</Link>
<Link
to="/about"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
>
{t('navigation.about')}
</Link>
<Link
to="/archive"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
>
{t('navigation.pastEvents')}
</Link>
{/* Thank the organizers — Story 7.4: only on a live/completed event page. Lives in the
primary mobile nav group (not the CTA strip below) so the hearts are reliably visible
inside the hamburger (post-event-#2 feedback #13). */}
{thankableEventCode && (
<div className="px-3 py-2" onClick={closeMobileMenu}>
<ThankOrganizersNavButton eventCode={thankableEventCode} />
</div>
)}
{isAuthenticated && hasAdminRole && (
<Link
to="/dashboard"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
>
{t('public.goToPortal')}
</Link>
)}
{isAuthenticated && isSpeaker && (
<Link
to="/speaker-portal/dashboard"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
>
{t('navigation.mySessions', 'My Sessions')}
</Link>
)}
{isAuthenticated && isAttendee && (
<Link
to="/attendee/dashboard"
onClick={closeMobileMenu}
className="px-3 py-3 rounded-md text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
data-testid="public-nav-mobile-my-events"
>
{t('navigation.myEvents', 'My Events')}
</Link>
)}
</nav>
{/* CTA buttons */}
<div className="px-4 pb-4 flex flex-col gap-3">
{isAuthenticated ? (
<>
{/* 2026-05-20 (Q#2b) — Portal/My Sessions moved up into the nav links block.
CTA buttons retain only the user-identity strip, My Profile (speakers),
language switcher, and logout. */}
<Button asChild variant="secondary" className="w-full">
<Link
to={
hasAdminRole
? '/dashboard'
: isSpeaker
? '/speaker-portal/dashboard'
: '/dashboard'
}
onClick={closeMobileMenu}
className="flex items-center gap-2"
>
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-xs font-semibold leading-none">
{initials}
</span>
{user?.email ?? ''}
</Link>
</Button>
{/* 2026-06-05 — My Profile for every authenticated user (role-neutral
/profile since Story 12.11), mirroring the desktop dropdown. */}
<Button asChild variant="secondary" className="w-full">
<Link to="/profile" onClick={closeMobileMenu} className="flex items-center gap-2">
<UserCircle className="h-4 w-4" />
{t('navigation.myProfile', 'My Profile')}
</Link>
</Button>
<div className="px-1">
<LanguageSwitcher />
</div>
<Button
variant="ghost"
className="w-full justify-start text-red-400 hover:text-red-300"
onClick={handleLogout}
>
<LogOut className="h-4 w-4 mr-2" />
{t('menu.logout')}
</Button>
</>
) : (
<>
<Button variant="secondary" asChild className="w-full">
<Link to="/auth/login" onClick={closeMobileMenu}>
{t('public.login')}
</Link>
</Button>
<Button asChild className="w-full">
<Link to="/auth/register" onClick={closeMobileMenu}>
{t('public.joinUp')}
</Link>
</Button>
</>
)}
</div>
</div>
</>
);
};
|