68 lines
2.5 KiB
Vue
68 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-card>
|
||
|
|
<v-card-title class="text-h4">
|
||
|
|
New Unified Sidebar Demo
|
||
|
|
</v-card-title>
|
||
|
|
|
||
|
|
<v-card-text>
|
||
|
|
<v-alert type="success" variant="tonal" class="mb-6">
|
||
|
|
<div class="text-h6 mb-2">✨ Modern Sidebar Features</div>
|
||
|
|
<ul class="pl-4">
|
||
|
|
<li>Clean white design with subtle borders</li>
|
||
|
|
<li>Collapsible sidebar with smooth animations</li>
|
||
|
|
<li>Icons that change color when active</li>
|
||
|
|
<li>User info with avatar at the bottom</li>
|
||
|
|
<li>Role badges (Admin/Sales)</li>
|
||
|
|
<li>Responsive - becomes a drawer on mobile</li>
|
||
|
|
<li>Page title in the top navbar</li>
|
||
|
|
</ul>
|
||
|
|
</v-alert>
|
||
|
|
|
||
|
|
<v-row>
|
||
|
|
<v-col cols="12" md="6">
|
||
|
|
<v-card variant="outlined">
|
||
|
|
<v-card-title>How to Use</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<p class="mb-3">Click the chevron icon in the sidebar header to collapse/expand it.</p>
|
||
|
|
<p class="mb-3">On mobile devices, use the hamburger menu to toggle the sidebar.</p>
|
||
|
|
<p>The sidebar automatically adjusts based on your role permissions.</p>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
|
||
|
|
<v-col cols="12" md="6">
|
||
|
|
<v-card variant="outlined">
|
||
|
|
<v-card-title>Navigation Items</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<p class="mb-3">The sidebar shows different menu items based on your role:</p>
|
||
|
|
<ul class="pl-4">
|
||
|
|
<li><strong>All users:</strong> Dashboard, Analytics, Berth List, Interest List, File Browser</li>
|
||
|
|
<li><strong>Sales/Admin:</strong> + Expenses, Interest Emails</li>
|
||
|
|
<li><strong>Admin only:</strong> + Admin Console</li>
|
||
|
|
</ul>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</v-col>
|
||
|
|
</v-row>
|
||
|
|
|
||
|
|
<v-alert type="info" variant="tonal" class="mt-6">
|
||
|
|
<div class="text-subtitle-1 font-weight-medium mb-2">Technical Details</div>
|
||
|
|
<p class="text-body-2">This sidebar uses Nuxt UI's <code>UDashboardSidebar</code> component with custom styling to match your brand colors and maintain a clean, professional look.</p>
|
||
|
|
</v-alert>
|
||
|
|
</v-card-text>
|
||
|
|
</v-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
definePageMeta({
|
||
|
|
middleware: ['authentication'],
|
||
|
|
layout: 'dashboard-unified'
|
||
|
|
});
|
||
|
|
|
||
|
|
useHead({
|
||
|
|
title: 'Sidebar Demo'
|
||
|
|
});
|
||
|
|
</script>
|