Superminaren/hackerspace.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clean up 'app-sidebar.tsx' export issues

Browse Source 
Refactor SidebarContent and add fallback for undefined member names.

Co-authored-by: Moheeb Zara <[email protected]>
This commit is contained in:
v0
2026-03-11 07:22:29 +00:00
co-authored by Moheeb Zara
parent 1036e1ff5e
commit d01b9c4359
1 changed files with 30 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/app-sidebar.tsx
+30 -42
View File
@@ -1,7 +1,7 @@
'use client'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
import { cn } from '@/lib/utils'
import { signOut } from '@/lib/auth-actions'
@@ -11,16 +11,16 @@ import {
MessageSquare, Users, CreditCard, BookUser, Download, LogOut,
} from 'lucide-react'
function NavLink({
href, label, icon: Icon, badge, active, onClick,
}: {
interface NavLinkProps {
href: string
label: string
icon: React.ElementType
badge?: number
active: boolean
onClick?: () => void
}) {
}
function NavLink({ href, label, icon: Icon, badge, active, onClick }: NavLinkProps) {
return (
<Link
href={href}
@@ -45,15 +45,6 @@ function NavLink({
)
}
// Bottom nav items for mobile
const MOBILE_NAV = [
{ label: 'Home', href: '/dashboard', icon: LayoutDashboard },
{ label: 'Tasks', href: '/tasks', icon: ListChecks },
{ label: 'Comms', href: '/comms', icon: MessageSquare },
{ label: 'Members', href: '/members', icon: Users },
{ label: 'More', href: null, icon: Menu },
]
interface AppSidebarProps {
member: SpaceMember & { spaces: Space }
taskBadge?: number
@@ -63,21 +54,20 @@ interface AppSidebarProps {
export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge = 0 }: AppSidebarProps) {
const pathname = usePathname()
const router = useRouter()
const space = member.spaces
const initials = member.display_name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
const initials = (member.display_name || 'U').split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
const isAdmin = member.role === 'admin' || member.role === 'board'
const [drawerOpen, setDrawerOpen] = useState(false)
function isActive(href: string) {
return pathname === href || pathname.startsWith(href + '/')
}
const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
async function handleSignOut() {
const handleSignOut = async () => {
await signOut()
}
const SidebarContent = ({ onNav }: { onNav?: () => void }) => (
const closeDrawer = () => setDrawerOpen(false)
const renderNav = (onNav?: () => void) => (
<>
{/* Logo */}
<div className="px-5 py-5 border-b border-[var(--sidebar-border)]">
@@ -94,26 +84,26 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
<div className="px-3 mb-1">
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">Workspace</p>
</div>
<NavLink href="/dashboard" label="Dashboard" icon={LayoutDashboard} active={isActive('/dashboard')} onClick={onNav} />
<NavLink href="/tasks" label="Tasks & Chores" icon={ListChecks} active={isActive('/tasks')} badge={taskBadge} onClick={onNav} />
<NavLink href="/projects" label="Projects" icon={FolderKanban} active={isActive('/projects')} onClick={onNav} />
<NavLink href="/ops" label="Ops & Facilities" icon={Settings2} active={isActive('/ops')} onClick={onNav} />
<NavLink href="/comms" label="Comms" icon={MessageSquare} active={isActive('/comms')} badge={commsBadge} onClick={onNav} />
<NavLink href="/dashboard" label="Dashboard" icon={LayoutDashboard} active={isActive('/dashboard')} onClick={onNav} />
<NavLink href="/tasks" label="Tasks & Chores" icon={ListChecks} active={isActive('/tasks')} badge={taskBadge} onClick={onNav} />
<NavLink href="/projects" label="Projects" icon={FolderKanban} active={isActive('/projects')} onClick={onNav} />
<NavLink href="/ops" label="Ops & Facilities" icon={Settings2} active={isActive('/ops')} onClick={onNav} />
<NavLink href="/comms" label="Comms" icon={MessageSquare} active={isActive('/comms')} badge={commsBadge} onClick={onNav} />
<div className="px-3 mt-4 mb-1">
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">People</p>
</div>
<NavLink href="/members" label="Members" icon={Users} active={isActive('/members')} onClick={onNav} />
<NavLink href="/members" label="Members" icon={Users} active={isActive('/members')} onClick={onNav} />
<NavLink href="/payments" label="Payments" icon={CreditCard} active={isActive('/payments')} badge={paymentBadge} onClick={onNav} />
<NavLink href="/contacts" label="Contacts" icon={BookUser} active={isActive('/contacts')} onClick={onNav} />
<NavLink href="/contacts" label="Contacts" icon={BookUser} active={isActive('/contacts')} onClick={onNav} />
{isAdmin && (
<>
<div className="px-3 mt-4 mb-1">
<p className="text-[10px] uppercase tracking-widest text-[var(--sidebar-foreground)]/30 px-2 py-1 font-mono">Admin</p>
</div>
<NavLink href="/import" label="Import / Sync" icon={Download} active={isActive('/import')} onClick={onNav} />
<NavLink href="/settings" label="Settings" icon={Settings2} active={isActive('/settings')} onClick={onNav} />
<NavLink href="/import" label="Import / Sync" icon={Download} active={isActive('/import')} onClick={onNav} />
<NavLink href="/settings" label="Settings" icon={Settings2} active={isActive('/settings')} onClick={onNav} />
</>
)}
</nav>
@@ -139,13 +129,13 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
return (
<>
{/* ── Desktop sidebar ─────────────────────────────────── */}
{/* Desktop sidebar */}
<aside className="hidden md:flex w-[230px] shrink-0 bg-[var(--sidebar)] flex-col h-screen sticky top-0 border-r border-[var(--sidebar-border)]">
<SidebarContent />
{renderNav()}
</aside>
{/* ── Mobile: top bar ──────────────────────────────────── */}
<div className="md:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--sidebar)] border-b border-[var(--sidebar-border)] flex items-center justify-between px-4 py-3">
{/* Mobile: top bar */}
<div className="md:hidden fixed top-0 left-0 right-0 z-40 bg-[var(--sidebar)] border-b border-[var(--sidebar-border)] flex items-center justify-between px-4 h-[52px]">
<Link href="/dashboard" className="flex items-center gap-2">
<div className="w-7 h-7 rounded bg-[var(--sidebar-primary)] flex items-center justify-center">
<span className="text-white font-mono text-[10px] font-bold">hs</span>
@@ -161,21 +151,19 @@ export function AppSidebar({ member, taskBadge = 0, commsBadge = 0, paymentBadge
</button>
</div>
{/* ── Mobile: full drawer ──────────────────────────────── */}
{/* Mobile: drawer overlay */}
{drawerOpen && (
<div className="md:hidden fixed inset-0 z-50 flex">
{/* Backdrop */}
<div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
{/* Drawer */}
<div className="absolute inset-0 bg-black/50" onClick={closeDrawer} />
<div className="relative w-[280px] bg-[var(--sidebar)] flex flex-col h-full shadow-xl">
<div className="flex items-center justify-between px-4 py-3 border-b border-[var(--sidebar-border)]">
<div className="flex items-center justify-between px-4 h-[52px] border-b border-[var(--sidebar-border)]">
<span className="text-[var(--sidebar-foreground)] text-sm font-mono font-bold">Menu</span>
<button onClick={() => setDrawerOpen(false)} className="text-[var(--sidebar-foreground)]/50 hover:text-[var(--sidebar-foreground)]">
<button onClick={closeDrawer} className="text-[var(--sidebar-foreground)]/50 hover:text-[var(--sidebar-foreground)]">
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto">
<SidebarContent onNav={() => setDrawerOpen(false)} />
<div className="flex-1 flex flex-col overflow-hidden">
{renderNav(closeDrawer)}
</div>
</div>
</div>