matt
/
port-nimara-client-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Resolve 500 error in unified sidebar by using simpler implementation 

- Replace problematic UDashboardSidebar components with custom implementation
- Use standard HTML/CSS for sidebar instead of Nuxt UI dashboard components
- Fix 'Cannot destructure property collapsed of undefined' error
- Maintain all features: responsive, role-based nav, clean design
- Ensure compatibility with existing Vuetify components
This commit is contained in:
Matt 2025-07-11 16:44:29 -04:00
parent 61235b163d
commit 7244349fe7
1 changed files with 124 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
layouts/dashboard-unified.vue
View File

@ -1,67 +1,65 @@
<template> <template>
<div class="min-h-screen bg-gray-50"> <div class="min-h-screen bg-gray-50 flex">
<!-- Main Dashboard Group -->
<UDashboardGroup>
<!-- Sidebar --> <!-- Sidebar -->
<UDashboardSidebar <div
v-model:open="sidebarOpen" :class="[
:collapsible="true" 'bg-white border-r border-gray-200 transition-all duration-300',
:resizable="false" sidebarOpen ? 'w-64' : 'w-0 overflow-hidden',
:ui="{ 'lg:w-64'
wrapper: 'bg-white border-r border-gray-200', ]"
header: 'px-4 py-4 border-b border-gray-100',
body: 'px-3 py-4',
footer: 'px-4 py-4 border-t border-gray-100'
}"
> >
<template #header="{ collapsed }"> <div class="h-full flex flex-col">
<!-- Header -->
<div class="px-4 py-4 border-b border-gray-100">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img <img
src="/Port Nimara New Logo-Circular Frame.png" src="/Port Nimara New Logo-Circular Frame.png"
class="h-8 w-8" class="h-8 w-8"
alt="Port Nimara" alt="Port Nimara"
> >
<transition name="fade"> <div class="flex flex-col">
<div v-if="!collapsed" class="flex flex-col">
<span class="text-sm font-semibold text-gray-900">Port Nimara</span> <span class="text-sm font-semibold text-gray-900">Port Nimara</span>
<span class="text-xs text-gray-500">Client Portal</span> <span class="text-xs text-gray-500">Client Portal</span>
</div> </div>
</transition>
</div> </div>
</template> </div>
<template #default="{ collapsed }"> <!-- Navigation -->
<!-- Navigation Menu --> <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
<UNavigationMenu <NuxtLink
:collapsed="collapsed" v-for="item in navigationItems"
:items="navigationItems" :key="item.to"
orientation="vertical" :to="item.to"
:ui="{ class="group flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200"
wrapper: 'space-y-1', :class="[
base: 'group flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-200', route.path === item.to
active: 'bg-blue-50 text-blue-700', ? 'bg-blue-50 text-blue-700'
inactive: 'text-gray-700 hover:bg-gray-100', : 'text-gray-700 hover:bg-gray-100'
icon: { ]"
base: 'w-5 h-5 flex-shrink-0', >
active: 'text-blue-700', <Icon
inactive: 'text-gray-400 group-hover:text-gray-600' :name="item.icon"
}, class="w-5 h-5 flex-shrink-0"
label: 'truncate', :class="[
badge: 'ml-auto' route.path === item.to
}" ? 'text-blue-700'
: 'text-gray-400 group-hover:text-gray-600'
]"
/> />
</template> <span class="truncate">{{ item.label }}</span>
</NuxtLink>
</nav>
<template #footer="{ collapsed }"> <!-- Footer -->
<div class="space-y-2"> <div class="px-4 py-4 border-t border-gray-100 space-y-2">
<!-- User Info --> <!-- User Info -->
<div v-if="authState?.user" class="flex items-center gap-3 p-2"> <div v-if="authState?.user" class="flex items-center gap-3 p-2">
<UAvatar <div class="flex-shrink-0">
:src="`https://ui-avatars.com/api/?name=${encodeURIComponent(authState.user.name || authState.user.email)}&background=387bca&color=fff`" <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
:alt="authState.user.name || authState.user.email" {{ (authState.user.name || authState.user.email || '?')[0].toUpperCase() }}
size="sm" </div>
/> </div>
<div v-if="!collapsed" class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-gray-900 truncate"> <p class="text-sm font-medium text-gray-900 truncate">
{{ authState.user.name || authState.user.email }} {{ authState.user.name || authState.user.email }}
</p> </p>
@ -72,70 +70,58 @@
</div> </div>
<!-- Role Badge --> <!-- Role Badge -->
<div v-if="!collapsed && authState?.groups?.length" class="px-2"> <div v-if="authState?.groups?.length" class="px-2">
<UBadge <div
v-if="authState.groups.includes('admin')" v-if="authState.groups.includes('admin')"
color="orange" class="inline-flex items-center justify-center w-full px-2 py-1 text-xs font-medium text-orange-700 bg-orange-100 rounded-md"
variant="subtle"
size="sm"
class="w-full justify-center"
> >
Admin Admin
</UBadge> </div>
<UBadge <div
v-else-if="authState.groups.includes('sales')" v-else-if="authState.groups.includes('sales')"
color="green" class="inline-flex items-center justify-center w-full px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded-md"
variant="subtle"
size="sm"
class="w-full justify-center"
> >
Sales Sales
</UBadge> </div>
</div> </div>
<!-- Logout Button --> <!-- Logout Button -->
<UButton <button
@click="handleLogout" @click="handleLogout"
:icon="collapsed ? 'i-heroicons-arrow-left-on-rectangle' : undefined" class="w-full flex items-center justify-start gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors duration-200"
:label="collapsed ? undefined : 'Logout'"
color="gray"
variant="ghost"
:block="!collapsed"
:square="collapsed"
class="w-full justify-start"
> >
<template v-if="!collapsed" #leading> <Icon name="i-heroicons-arrow-left-on-rectangle" class="w-5 h-5 text-gray-400" />
<UIcon name="i-heroicons-arrow-left-on-rectangle" class="w-5 h-5" /> <span>Logout</span>
</template> </button>
</UButton> </div>
</div>
</div> </div>
</template>
</UDashboardSidebar>
<!-- Main Panel --> <!-- Main Content -->
<UDashboardPanel> <div class="flex-1 flex flex-col">
<template #header> <!-- Top Bar -->
<UDashboardNavbar :title="pageTitle" class="bg-white border-b border-gray-200"> <header class="bg-white border-b border-gray-200 px-4 py-3">
<template #left> <div class="flex items-center justify-between">
<UDashboardSidebarToggle <div class="flex items-center gap-4">
v-if="mdAndDown" <!-- Mobile Menu Toggle -->
variant="ghost" <button
color="gray" @click="sidebarOpen = !sidebarOpen"
/> class="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
</template> >
<Icon name="i-heroicons-bars-3" class="w-6 h-6" />
</button>
<template #right> <!-- Page Title -->
<!-- Additional navbar content can go here --> <h1 class="text-xl font-semibold text-gray-900">{{ pageTitle }}</h1>
</template> </div>
</UDashboardNavbar> </div>
</template> </header>
<!-- Page Content --> <!-- Page Content -->
<div class="p-6"> <main class="flex-1 p-6 overflow-y-auto">
<slot /> <slot />
</main>
</div> </div>
</UDashboardPanel>
</UDashboardGroup>
</div> </div>
</template> </template>
@ -145,21 +131,16 @@ import { ref, computed } from 'vue';
// Define NavigationMenuItem type locally // Define NavigationMenuItem type locally
interface NavigationMenuItem { interface NavigationMenuItem {
label: string; label: string;
icon?: string; icon: string;
to?: string; to: string;
badge?: string | number;
click?: () => void;
defaultOpen?: boolean;
children?: NavigationMenuItem[];
} }
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const nuxtApp = useNuxtApp(); const nuxtApp = useNuxtApp();
const { mdAndDown } = useDisplay();
// Sidebar state // Sidebar state
const sidebarOpen = ref(true); const sidebarOpen = ref(false);
// Get auth state - with fallback to prevent errors // Get auth state - with fallback to prevent errors
const authState = computed(() => { const authState = computed(() => {
@ -197,7 +178,7 @@ const pageTitle = computed(() => {
}); });
// Navigation items based on user role // Navigation items based on user role
const navigationItems = computed((): NavigationMenuItem[][] => { const navigationItems = computed((): NavigationMenuItem[] => {
const items: NavigationMenuItem[] = [ const items: NavigationMenuItem[] = [
{ {
label: 'Dashboard', label: 'Dashboard',
@ -261,8 +242,7 @@ const navigationItems = computed((): NavigationMenuItem[][] => {
}); });
} }
// Return as nested array for proper spacing return items;
return [items];
}); });
// Logout handler // Logout handler
@ -276,23 +256,13 @@ const handleLogout = async () => {
await router.push('/login'); await router.push('/login');
} }
}; };
// Initialize sidebar state based on screen size
onMounted(() => {
if (mdAndDown.value) {
sidebarOpen.value = false;
}
});
</script> </script>
<style scoped> <style scoped>
.fade-enter-active, /* Ensure proper responsive behavior */
.fade-leave-active { @media (min-width: 1024px) {
transition: opacity 0.2s ease; .lg\:w-64 {
} width: 16rem !important;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
} }
</style> </style>