Kalana B. Thilakarathna
0052725b88
- Created UserViewSheet component to display user details including username, full name, role, status, and timestamps. - Created RoleViewSheet component to display role details including name, level, status, creation date, and associated permissions. - Introduced permissions configuration in a new permissions.ts file, defining categories and permission codes for better management. - Implemented middleware for authentication, ensuring access control for protected routes.
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { HugeiconsIcon } from '@hugeicons/react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { useAuth } from '@/contexts/auth-context'
|
|
import { BOTTOM_NAV_CANDIDATES, type NavItem } from '@/config/nav'
|
|
|
|
const MAX_TABS = 5
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname()
|
|
const { permissions } = useAuth()
|
|
|
|
const visibleItems: NavItem[] = BOTTOM_NAV_CANDIDATES.filter((item) => {
|
|
if (!item.permission) return true
|
|
return permissions.has(item.permission)
|
|
}).slice(0, MAX_TABS)
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background md:hidden">
|
|
<div className="flex h-16 items-stretch">
|
|
{visibleItems.map((item) => {
|
|
const isActive =
|
|
pathname === item.href ||
|
|
(item.href !== '/' && pathname.startsWith(item.href))
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex flex-1 flex-col items-center justify-center gap-1 text-xs transition-colors',
|
|
isActive
|
|
? 'text-primary'
|
|
: 'text-muted-foreground hover:text-foreground',
|
|
)}
|
|
>
|
|
<HugeiconsIcon
|
|
icon={item.icon}
|
|
size={22}
|
|
className={isActive ? 'text-primary' : undefined}
|
|
/>
|
|
<span className="truncate">{item.title}</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|