Fix: admin layout #33

DanericNetwork · Jan 18, 2024 · 4d28752 · 4d28752
2 parents 83a7179 + d8f0358
commit 4d28752
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
@@ -7,24 +7,29 @@
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
-        <a href="#" class="nav-link active d-flex" aria-current="page" style="background-color: #003bb2;">
-          <Icon icon="full-house" size="16" color="white" />&nbsp;Home </a>
+        <a href="/admin" :class="{ 'active': $page.url === ('/admin'), 'link-light': $page.url !== ('/admin') }" class="nav-link d-flex" aria-current="page">
+          <Icon icon="full-house" size="16" color="white" />&nbsp;Home
+        </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-light d-flex">
-          <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items </a>
+        <a href="/admin/items" :class="{ 'active': $page.url.startsWith('/admin/items'), 'link-light': !$page.url.startsWith('/admin/items') }" class="nav-link d-flex"> <!-- link-light -->
+          <Icon icon="full-archive" size="16" color="white" /> &nbsp;Items
+        </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-light d-flex">
-          <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen </a>
+        <a href="/admin/reservations" :class="{ 'active': $page.url.startsWith('/admin/reservations'), 'link-light': !$page.url.startsWith('/admin/reservations') }" class="nav-link link-light d-flex">
+          <Icon icon="list" size="16" color="white" /> &nbsp;Reserveringen
+        </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-light d-flex">
-          <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten </a>
+        <a href="/admin/users" :class="{ 'active': $page.url.startsWith('/admin/users'), 'link-light': !$page.url.startsWith('/admin/users') }" class="nav-link link-light d-flex">
+          <Icon icon="full-people" size="16" color="white" /> &nbsp;Klanten
+        </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-light d-flex">
-          <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen </a>
+        <a href="/admin/invoices" :class="{ 'active': $page.url.startsWith('/admin/invoices'), 'link-light': !$page.url.startsWith('/admin/invoices') }" class="nav-link link-light d-flex">
+          <Icon icon="full-euro" size="16" color="white" /> &nbsp;Facturen
+        </a>
       </li>
     </ul>
     <hr>
@@ -42,6 +47,9 @@
       </ul>
     </div>
   </div>
+  <div class="slot">
+    <slot />
+  </div>
 </template>
 
 <script>
@@ -69,4 +77,14 @@
 
 <style lang="scss" scoped>
   @import url("https://bootswatch.com/5/lumen/bootstrap.css");
+
+  .active {
+    background-color: #003bb2 !important;
+  }
+
+  .slot {
+    display: flex;
+    width: 100%;
+    background-color: #f2f2f2
+  }
 </style>
diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
@@ -1,39 +1,40 @@
 <template>
   <div class="admin-content">
-    <AdminLayout />
-    <div class="dashboard">
-      <span class="dashboard-title">Dashboard</span>
-      <div class="info-cards">
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Items</span>
-            <p class="card-text">{{ itemCount }}</p>
+    <AdminLayout>
+      <div class="dashboard">
+        <span class="dashboard-title">Dashboard</span>
+        <div class="info-cards">
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Items</span>
+              <p class="card-text">{{ itemCount }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Klanten</span>
-            <p class="card-text">{{ customerCount }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Klanten</span>
+              <p class="card-text">{{ customerCount }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Reserveringen</span>
-            <p class="card-text">{{ reservationCount }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Reserveringen</span>
+              <p class="card-text">{{ reservationCount }}</p>
+            </div>
           </div>
-        </div>
-        <div class="card">
-          <div class="card-body text-center">
-            <span class="card-title">Openstaande Facturen</span>
-            <p class="card-text">{{ openInvoiceCount }}</p>
+          <div class="card">
+            <div class="card-body text-center">
+              <span class="card-title">Openstaande Facturen</span>
+              <p class="card-text">{{ openInvoiceCount }}</p>
+            </div>
           </div>
         </div>
+        <div class="charts">
+          <apexchart class="chart" width="95%" type="bar" :options="options" :series="series"></apexchart>
+          <apexchart class="chart" width="95%" type="bar" :options="options2" :series="series2"></apexchart>
+        </div>
       </div>
-      <div class="charts">
-        <apexchart class="chart" width="95%" type="bar" :options="options" :series="series"></apexchart>
-        <apexchart class="chart" width="95%" type="bar" :options="options2" :series="series2"></apexchart>
-      </div>
-    </div>
+    </AdminLayout>
   </div>
 </template>
 <script>
@@ -128,7 +129,6 @@
       align-items: start;
       width: 100%;
       padding: 1.3rem;
-      background-color: #f2f2f2;
 
       .dashboard-title {
         font-size: 2rem;