<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>
