kbe/dishpix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add conditional link for logged in user and administrator

Browse Source
This commit is contained in:
kbe
2025-08-14 16:51:20 +02:00
parent 7641675180
commit 51b81c40af
1 changed files with 123 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/ui/header.tsx
View File

@@ -7,16 +7,21 @@ import { useState } from "react"
interface HeaderProps {
className?: string
isLoggedIn?: boolean
isAdmin?: boolean
}
const navigation = [
{ name: 'Dashboard', href: '/dashboard', current: true },
{ name: 'Projects', href: '/projects', current: false },
{ name: 'Calendar', href: '/calendar', current: false },
{ name: 'Reports', href: '/reports', current: false },
{ name: 'Home', href: '/', current: false, requiresAuth: false },
{ name: 'Pricing', href: '/pricing', current: false, requiresAuth: false },
{ name: 'FAQ', href: '/faq', current: false, requiresAuth: false },
{ name: 'Dashboard', href: '/dashboard', current: false, requiresAuth: false },
{ name: 'Projects', href: '/projects', current: false, requiresAuth: true },
{ name: 'Calendar', href: '/calendar', current: false, requiresAuth: false },
{ name: 'Reports', href: '/reports', current: false, requiresAuth: true },
]
export function Header({ className }: HeaderProps) {
export function Header({ className, isLoggedIn = false, isAdmin = false }: HeaderProps) {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const [profileOpen, setProfileOpen] = useState(false)
@@ -37,6 +42,7 @@ export function Header({ className }: HeaderProps) {
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navigation.map((item) => (
(item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
<Link
key={item.name}
href={item.href}
@@ -50,11 +56,13 @@ export function Header({ className }: HeaderProps) {
>
{item.name}
</Link>
)
))}
</div>
</div>
</div>
{isLoggedIn && (
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
<button
@@ -102,6 +110,7 @@ export function Header({ className }: HeaderProps) {
</div>
</div>
</div>
)}
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
@@ -131,6 +140,7 @@ export function Header({ className }: HeaderProps) {
<div className="md:hidden">
<div className="space-y-1 px-2 pb-3 pt-2 sm:px-3">
{navigation.map((item) => (
(item.requiresAuth ? (isLoggedIn || isAdmin) : true) && (
<Link
key={item.name}
href={item.href}
@@ -144,9 +154,12 @@ export function Header({ className }: HeaderProps) {
>
{item.name}
</Link>
)
))}
</div>
<div className="border-t border-gray-700 pb-3 pt-4">
{isLoggedIn && (
<div>
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img
@@ -182,6 +195,8 @@ export function Header({ className }: HeaderProps) {
</Link>
</div>
</div>
)}
</div>
</div>
)}
</header>