version 0

layouts/default.vue

@@ -1,83 +1,206 @@
 <template>
   <v-app>
-    <v-app-bar app color="#ff9248" dark>
+    <!-- Navigation Drawer -->
-      <v-app-bar-nav-icon @click="rail = !rail"></v-app-bar-nav-icon>
+    <v-navigation-drawer 
-      <v-toolbar-title class="ml-2" style="color: white"
+      v-model="drawer" 
-        >Antrean RSSA</v-toolbar-title
+      :rail="rail" 
-      >
+      permanent 
-      <v-spacer></v-spacer>
+      app
-      <v-btn icon>
+      color="white"
-        <v-icon color="white">mdi-account-circle</v-icon>
+      width="280"
-      </v-btn>
+      rail-width="72"
-      <span class="mr-2" style="color: white">Adam Sulfat</span>
+    >
-    </v-app-bar>
+      <!-- Header Sidebar -->
+      <div class="pa-4 d-flex align-center" style="height: 64px;">
+        <v-icon color="#ff9248" size="32">mdi-hospital-building</v-icon>
+        <v-toolbar-title v-show="!rail" class="ml-3 text-h6">
+          Antrean RSSA
+        </v-toolbar-title>
+      </div>
+
+      <v-divider></v-divider>
+
+      <!-- Menu Items -->
+      <v-list density="default" nav class="py-2">
+        <v-list-subheader v-show="!rail" class="text-caption text-grey">
+          OVERVIEW
+        </v-list-subheader>
 
-    <v-navigation-drawer v-model="drawer" :rail="rail" permanent app>
-      <v-list density="compact" nav>
         <template v-for="item in items" :key="item.title">
+          <!-- Item dengan Children -->
           <v-menu
             v-if="item.children"
             open-on-hover
             location="end"
-            :nudge-right="8"
+            :disabled="!rail"
           >
             <template v-slot:activator="{ props }">
+              <v-list-group v-if="!rail" :value="item.title">
+                <template v-slot:activator="{ props }">
+                  <v-list-item
+                    v-bind="props"
+                    :prepend-icon="item.icon"
+                    :title="item.title"
+                    :active="item.title === currentActiveMenu"
+                    rounded="lg"
+                    class="mx-2 my-1"
+                  >
+                  </v-list-item>
+                </template>
+                <v-list-item
+                  v-for="child in item.children"
+                  :key="child.title"
+                  :to="child.to"
+                  :title="child.title"
+                  :active="child.to === currentRoute.path"
+                  rounded="lg"
+                  class="mx-2 my-1 pl-12"
+                >
+                </v-list-item>
+              </v-list-group>
+
+              <!-- Rail mode menu -->
               <v-list-item
+                v-else
                 v-bind="props"
                 :prepend-icon="item.icon"
-                :title="item.title"
-                :value="item.title"
                 :active="item.title === currentActiveMenu"
+                rounded="lg"
+                class="mx-2 my-1"
               >
               </v-list-item>
             </template>
 
-            <!-- Konten menu (sub-menu) -->
+            <!-- Submenu untuk rail mode -->
-            <v-list>
+            <v-list class="py-2" style="min-width: 200px;">
               <v-list-item>
-                <v-list-item-title class="font-weight-bold">{{
+                <v-list-item-title class="font-weight-bold">
-                  item.title
+                  {{ item.title }}
-                }}</v-list-item-title>
+                </v-list-item-title>
               </v-list-item>
-              <v-divider></v-divider>
+              <v-divider class="my-2"></v-divider>
               <v-list-item
                 v-for="child in item.children"
                 :key="child.title"
                 :to="child.to"
-                link
+                :title="child.title"
                 :active="child.to === currentRoute.path"
+                rounded="lg"
+                class="mx-2"
               >
-                <v-list-item-title>{{ child.title }}</v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
 
-          <!-- V-list-item untuk item yang tidak memiliki sub-menu -->
+          <!-- Item tanpa Children -->
           <v-list-item
             v-else
             :prepend-icon="item.icon"
-            :title="item.title"
+            :title="!rail ? item.title : ''"
             :to="item.to"
-            :value="item.title"
             :active="item.to === currentRoute.path"
-            link
+            rounded="lg"
-          ></v-list-item>
+            class="mx-2 my-1"
+          >
+            <template v-slot:append v-if="item.badge && !rail">
+              <v-chip size="x-small" color="primary">{{ item.badge }}</v-chip>
+            </template>
+          </v-list-item>
         </template>
+
+        <v-divider class="my-4"></v-divider>
+
+        <v-list-subheader v-show="!rail" class="text-caption text-grey">
+          ACCOUNT
+        </v-list-subheader>
+
+        <v-list-item
+          prepend-icon="mdi-cog-outline"
+          :title="!rail ? 'Settings' : ''"
+          to="/settings"
+          rounded="lg"
+          class="mx-2 my-1"
+        >
+        </v-list-item>
+
+        <v-list-item
+          prepend-icon="mdi-logout"
+          :title="!rail ? 'Log out' : ''"
+          rounded="lg"
+          class="mx-2 my-1"
+        >
+        </v-list-item>
       </v-list>
+
+      <template v-slot:append>
+        <!-- Theme Toggle -->
+        <div class="pa-4 d-flex justify-center align-center">
+          <v-icon color="primary" size="20">mdi-white-balance-sunny</v-icon>
+          <v-switch
+            v-show="!rail"
+            v-model="darkMode"
+            hide-details
+            density="compact"
+            color="primary"
+            class="mx-2"
+          ></v-switch>
+          <v-icon v-show="!rail" size="20">mdi-moon-waning-crescent</v-icon>
+        </div>
+
+        <v-divider></v-divider>
+
+        <!-- User Profile -->
+        <div class="pa-4">
+          <div class="d-flex align-center">
+            <v-avatar color="#ff9248" size="40">
+              <span class="text-white">AS</span>
+            </v-avatar>
+            <div v-show="!rail" class="ml-3 flex-grow-1">
+              <div class="text-subtitle-2 font-weight-bold">Adam Sulfat</div>
+              <div class="text-caption text-grey">adam@rssa.com</div>
+            </div>
+            <v-btn
+              v-show="!rail"
+              icon
+              size="small"
+              variant="text"
+            >
+              <v-icon size="20">mdi-dots-vertical</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </template>
     </v-navigation-drawer>
 
+    <!-- Main Content -->
     <v-main>
-      <v-container fluid class="pa-0">
+      <!-- Top Bar untuk Toggle -->
+      <v-app-bar flat color="transparent" height="64">
+        <v-btn
+          icon
+          @click="rail = !rail"
+          class="ml-2"
+        >
+          <v-icon>mdi-menu</v-icon>
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-btn icon>
+          <v-icon>mdi-bell-outline</v-icon>
+        </v-btn>
+      </v-app-bar>
+
+      <v-container fluid class="pa-6">
         <slot></slot>
       </v-container>
     </v-main>
-    <v-footer app padless class="bg-grey-lighten-4">
+
+    <!-- Footer -->
+    <v-footer app class="bg-grey-lighten-4">
       <v-container fluid class="py-2">
         <v-row no-gutters align="center">
           <v-col cols="12" md="6">
             <span class="text-caption text-grey-darken-2">
-              RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2
+              RSUD Dr. Saiful Anwar Malang | Jl. Jaksa Agung Suprapto No. 2 Malang | Telp: 0341-362101
-              Malang | Telp : 0341- 362101 | Fax : 0341-369384
             </span>
           </v-col>
           <v-col cols="12" md="6" class="text-right">
@@ -94,12 +217,23 @@
 <script setup>
 import { ref, computed } from "vue";
 import { useRoute } from 'vue-router';
-import AntrianKlinik from "~/pages/Anjungan/AntrianKlinik.vue";
 
-// Data untuk item-item sidebar
+// State
+const drawer = ref(true);
+const rail = ref(false);
+const darkMode = ref(false);
+
+// Menu Items
 const items = ref([
-  { title: "Dashboard", icon: "mdi-view-dashboard", to: "/dashboard" },
+  { title: "Dashboard", icon: "mdi-view-dashboard-outline", to: "/dashboard" },
-  { title: "Setting", icon: "mdi-cog",
+  // { title: "Marketplace", icon: "mdi-storefront-outline", to: "/marketplace" },
+  // { title: "My Properties", icon: "mdi-home-outline", to: "/properties" },
+  // { title: "Auctions", icon: "mdi-gavel", to: "/auctions" },
+  // { title: "Wallet", icon: "mdi-wallet-outline", to: "/wallet" },
+  // { title: "Favorites", icon: "mdi-heart-outline", to: "/favorites" },
+  { 
+    title: "Setting", 
+    icon: "mdi-cog-outline",
     children: [
       { title: "Hak Akses", to: "/setting/hak-akses" },
       { title: "User Login", to: "/setting/user-login" },
@@ -109,26 +243,19 @@ const items = ref([
       { title: "Screen", to: "/setting/screen" },
     ],
   },
-  { title: "Loket Admin", icon: "mdi-account-supervisor", to: "/loket-admin" },
+  { title: "Loket Admin", icon: "mdi-account-supervisor-outline", to: "/loket-admin" },
-  { title: "Ranap Admin", icon: "mdi-bed", to: "/ranap-admin" },
+  { title: "Ranap Admin", icon: "mdi-bed-outline", to: "/ranap-admin" },
-  { title: "Klinik Admin", icon: "mdi-hospital-box", to: "/klinik-admin" },
+  { 
-  { title: "Klinik Ruang Admin", icon: "mdi-hospital-marker", to: "/klinik-ruang-admin" },
+    title: "Anjungan", 
-  { title: "Anjungan", icon: "mdi-account-box-multiple",
+    icon: "mdi-account-box-multiple-outline",
-      children: [
+    children: [
-        { title: "Anjungan", to: "/anjungan/anjungan" },
+      { title: "Anjungan", to: "/anjungan/anjungan" },
-        { title: "Klinik Ruang", to: "/anjungan/AntrianKlinik"},
+      { title: "Klinik Ruang", to: "/anjungan/AntrianKlinik"},
-        ],
+    ],
   },
-  { title: "Fast Track", icon: "mdi-clock-fast", to: "/fast-track" },
+  { title: "Data Pasien", icon: "mdi-account-multiple-outline", to: "/data-pasien" },
-  { title: "Data Pasien", icon: "mdi-account-multiple", to: "/data-pasien" },
-  { title: "Screen", icon: "mdi-monitor", to: "/setting/screen" },
-  { title: "List Pasien", icon: "mdi-format-list-bulleted", to: "/list-pasien" },
 ]);
 
-// State untuk sidebar
-const drawer = ref(true);
-const rail = ref(false);
-
 const currentRoute = useRoute();
 const currentActiveMenu = computed(() => {
   const currentItem = items.value.find(item => item.to === currentRoute.path);
@@ -150,7 +277,23 @@ const currentActiveMenu = computed(() => {
 
 <style scoped>
 .v-list-item--active {
-  background-color: #ffffff;
+  background-color: #e8f5e9 !important;
-  color: #000000 !important;
+  color: #2e7d32 !important;
 }
-</style>
+
+.v-list-item--active :deep(.v-list-item__prepend) {
+  color: #2e7d32 !important;
+}
+
+.v-list-item {
+  transition: all 0.2s ease;
+}
+
+.v-list-item:hover {
+  background-color: #f5f5f5;
+}
+
+.v-navigation-drawer {
+  border-right: 1px solid #e0e0e0 !important;
+}
+</style>