Remove hamburger buttons and implement enhanced sidebar design across all layouts

- Removed hamburger menu buttons from all layouts (member, admin, board, dashboard)
- Updated all sidebars to fixed 280px width (non-collapsible)
- Enhanced glass morphism effects with 30px blur
- Implemented vertical profile card with small avatar
- Added consistent animations and hover effects
- Updated design documentation with new specifications

layouts/admin.vue

@@ -1,36 +1,36 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app width="300" class="glass-drawer">
-      <!-- Logo Section with Glass Effect -->
-      <v-list-item class="pa-4 text-center glass-logo-section">
+    <v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
+      <!-- Enhanced Logo Section -->
+      <v-list-item class="pa-4 text-center enhanced-glass-logo">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
           width="80" 
           height="80"
-          class="mx-auto mb-2 float-animation" 
+          class="mx-auto mb-2 shimmer-animation" 
         />
-        <div class="text-h6 font-weight-bold monaco-red-text">
+        <div class="text-h6 font-weight-bold text-gradient">
           MonacoUSA Portal
         </div>
         <v-chip 
           size="x-small" 
-          class="monaco-chip-gradient mt-1"
+          class="glass-badge mt-1"
         >
           ADMINISTRATOR
         </v-chip>
       </v-list-item>
       
-      <v-divider class="glass-divider" />
+      <v-divider class="glass-divider mx-3" />
       
-      <!-- Navigation Menu with Glass Effects -->
-      <v-list nav density="comfortable" class="glass-nav-list">
+      <!-- Enhanced Navigation Menu -->
+      <v-list nav density="comfortable" class="enhanced-glass-nav">
         <!-- Admin Overview -->
         <v-list-item 
           to="/admin/dashboard" 
           prepend-icon="mdi-view-dashboard"
           title="Admin Dashboard"
           value="dashboard"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <!-- User Management -->
@@ -40,7 +40,7 @@
               v-bind="props"
               prepend-icon="mdi-account-cog"
               title="User Management"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -75,7 +75,7 @@
               v-bind="props"
               prepend-icon="mdi-account-group"
               title="Member Management"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -106,7 +106,7 @@
               v-bind="props"
               prepend-icon="mdi-currency-usd"
               title="Financial"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -137,7 +137,7 @@
               v-bind="props"
               prepend-icon="mdi-cog"
               title="System"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -179,7 +179,7 @@
           prepend-icon="mdi-calendar"
           title="Events Management"
           value="events"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <!-- Analytics -->
@@ -188,7 +188,7 @@
           prepend-icon="mdi-chart-line"
           title="Analytics & Insights"
           value="analytics"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <v-divider class="my-2 glass-divider" />
@@ -200,40 +200,68 @@
           prepend-icon="mdi-shield-account"
           title="Board Portal"
           value="board-view"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
         <v-list-item 
           to="/member/dashboard" 
           prepend-icon="mdi-account"
           title="Member Portal"
           value="member-view"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
       </v-list>
       
-      <!-- Footer with Glass Card -->
+      <!-- Enhanced Profile Card -->
       <template v-slot:append>
-        <div class="pa-4">
-          <v-card 
-            class="glass-card glass-card--colored text-center pa-3"
-          >
-            <v-icon size="small" class="mb-1" color="white">mdi-shield-crown</v-icon>
-            <div class="text-caption font-weight-bold text-white">FULL ACCESS</div>
+        <div class="pa-3">
+          <v-card class="glass-profile-card pa-3">
+            <div class="d-flex flex-column align-center">
+              <v-avatar size="small" class="mb-2">
+                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
+              </v-avatar>
+              <div class="text-center">
+                <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email || 'admin@monacousa.org' }}</div>
+              </div>
+              <v-menu location="top">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    v-bind="props"
+                    icon="mdi-dots-vertical" 
+                    size="x-small" 
+                    variant="text"
+                    class="mt-2"
+                  />
+                </template>
+                <v-list density="compact" class="glass-menu">
+                  <v-list-item @click="() => {}">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-account</v-icon>
+                    </template>
+                    <v-list-item-title>Profile</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="() => {}">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-cog</v-icon>
+                    </template>
+                    <v-list-item-title>Settings</v-list-item-title>
+                  </v-list-item>
+                  <v-divider class="my-1" />
+                  <v-list-item @click="logout">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-logout</v-icon>
+                    </template>
+                    <v-list-item-title>Logout</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </div>
           </v-card>
         </div>
       </template>
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar admin-bar">
-      <!-- Navigation Toggle -->
-      <v-btn
-        icon
-        @click="drawer = !drawer"
-        class="mr-2 glass-icon-btn"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-      
       <v-toolbar-title class="font-weight-bold d-flex align-center text-white">
         Admin Portal
         <v-chip 

layouts/board.vue

@@ -1,36 +1,36 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app width="280" class="glass-drawer">
-      <!-- Logo Section with Glass Effect -->
-      <v-list-item class="pa-4 text-center glass-logo-section">
+    <v-navigation-drawer v-model="drawer" app width="280" permanent class="enhanced-glass-drawer">
+      <!-- Enhanced Logo Section -->
+      <v-list-item class="pa-4 text-center enhanced-glass-logo">
         <v-img 
           src="/MONACOUSA-Flags_376x376.png" 
           width="80" 
           height="80"
-          class="mx-auto mb-2 float-animation" 
+          class="mx-auto mb-2 shimmer-animation" 
         />
-        <div class="text-h6 font-weight-bold monaco-red-text">
+        <div class="text-h6 font-weight-bold text-gradient">
           MonacoUSA Portal
         </div>
         <v-chip 
           size="x-small" 
-          class="monaco-chip-gradient mt-1"
+          class="glass-badge mt-1"
         >
           BOARD MEMBER
         </v-chip>
       </v-list-item>
       
-      <v-divider class="glass-divider" />
+      <v-divider class="glass-divider mx-3" />
       
-      <!-- Navigation Menu with Glass Effects -->
-      <v-list nav density="comfortable" class="glass-nav-list">
+      <!-- Enhanced Navigation Menu -->
+      <v-list nav density="comfortable" class="enhanced-glass-nav">
         <!-- Board Overview -->
         <v-list-item 
           to="/board/dashboard" 
           prepend-icon="mdi-view-dashboard"
           title="Board Dashboard"
           value="dashboard"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <!-- Member Management -->
@@ -40,7 +40,7 @@
               v-bind="props"
               prepend-icon="mdi-account-group"
               title="Members"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -80,7 +80,7 @@
               v-bind="props"
               prepend-icon="mdi-calendar"
               title="Events & Meetings"
-              class="glass-nav-item"
+              class="glass-nav-item animated-nav-item"
             />
           </template>
           
@@ -110,7 +110,7 @@
           prepend-icon="mdi-chart-box"
           title="Reports & Analytics"
           value="reports"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <!-- Governance -->
@@ -119,7 +119,7 @@
           prepend-icon="mdi-gavel"
           title="Governance"
           value="governance"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <!-- Communications -->
@@ -128,7 +128,7 @@
           prepend-icon="mdi-email-newsletter"
           title="Communications"
           value="communications"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
 
         <v-divider class="my-2 glass-divider" />
@@ -140,33 +140,61 @@
           prepend-icon="mdi-account"
           title="Member View"
           value="member-view"
-          class="glass-nav-item"
+          class="glass-nav-item animated-nav-item"
         />
       </v-list>
       
-      <!-- Footer with Glass Card -->
+      <!-- Enhanced Profile Card -->
       <template v-slot:append>
-        <div class="pa-4">
-          <v-card 
-            class="glass-card glass-card--colored text-center pa-3"
-          >
-            <v-icon size="small" class="mb-1" color="white">mdi-shield-account</v-icon>
-            <div class="text-caption font-weight-bold text-white">BOARD ACCESS</div>
+        <div class="pa-3">
+          <v-card class="glass-profile-card pa-3">
+            <div class="d-flex flex-column align-center">
+              <v-avatar size="small" class="mb-2">
+                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
+              </v-avatar>
+              <div class="text-center">
+                <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
+                <div class="text-caption text-medium-emphasis">{{ user?.email || 'board@monacousa.org' }}</div>
+              </div>
+              <v-menu location="top">
+                <template v-slot:activator="{ props }">
+                  <v-btn 
+                    v-bind="props"
+                    icon="mdi-dots-vertical" 
+                    size="x-small" 
+                    variant="text"
+                    class="mt-2"
+                  />
+                </template>
+                <v-list density="compact" class="glass-menu">
+                  <v-list-item @click="() => {}">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-account</v-icon>
+                    </template>
+                    <v-list-item-title>Profile</v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="() => {}">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-cog</v-icon>
+                    </template>
+                    <v-list-item-title>Settings</v-list-item-title>
+                  </v-list-item>
+                  <v-divider class="my-1" />
+                  <v-list-item @click="logout">
+                    <template v-slot:prepend>
+                      <v-icon size="small">mdi-logout</v-icon>
+                    </template>
+                    <v-list-item-title>Logout</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </div>
           </v-card>
         </div>
       </template>
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar board-bar">
-      <!-- Navigation Toggle -->
-      <v-btn
-        icon
-        @click="drawer = !drawer"
-        class="mr-2 glass-icon-btn"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-      
       <v-toolbar-title class="font-weight-bold text-white">
         Board Portal
       </v-toolbar-title>

layouts/dashboard.vue

@@ -97,18 +97,12 @@
     </v-navigation-drawer>
     
     <v-app-bar app color="primary" elevation="2">
-      <!-- MonacoUSA Logo as Navigation Toggle -->
-      <v-btn
-        variant="text"
-        @click="drawer = !drawer"
+      <!-- MonacoUSA Logo -->
+      <MonacoUSALogo 
+        size="small" 
+        variant="white"
         class="mr-2"
-      >
-        <MonacoUSALogo 
-          size="small" 
-          variant="white"
-          clickable
-        />
-      </v-btn>
+      />
       
       <v-toolbar-title class="text-white font-weight-bold">
         MonacoUSA Portal

layouts/member.vue

@@ -111,15 +111,6 @@
     </v-navigation-drawer>
     
     <v-app-bar app elevation="0" flat class="glass-app-bar member-bar">
-      <!-- Navigation Toggle -->
-      <v-btn
-        icon
-        @click="drawer = !drawer"
-        class="mr-2 glass-icon-btn"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-      
       <v-toolbar-title class="font-weight-bold text-white">
         Member Portal
       </v-toolbar-title>