Merge branch 'dev' of https://github.com/DanericNetwork/Biblio-App in…

…to fix/admin-dashboard
DanericNetwork · Jan 18, 2024 · c112041 · c112041
2 parents b591a1b + 4d28752
commit c112041
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 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
@@ -133,7 +133,6 @@
       align-items: start;
       width: 100%;
       padding: 1.3rem;
-      background-color: #f2f2f2;
 
       .dashboard-title {
         font-size: 2rem;