From a8c15d75f4f8b259497bb13c9f98648f42449085 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 17 Jan 2024 15:36:20 +0100
Subject: [PATCH 1/5] feat: add slot to the admin layout

---
 src/resources/vue/layouts/admin-layout.vue | 24 +++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index 798a065..1a60928 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -8,23 +8,28 @@
     <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>
+          <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>
+          <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>
+          <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>
+          <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>
+          <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,10 @@
 
 <style lang="scss" scoped>
   @import url("https://bootswatch.com/5/lumen/bootstrap.css");
+
+  .slot {
+    display: flex;
+    width: 100%;
+    background-color: #f2f2f2
+  }
 </style>
\ No newline at end of file

From 026f68204ebdc732c1870593243999035b6cc3e6 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Wed, 17 Jan 2024 15:36:56 +0100
Subject: [PATCH 2/5] fix: moved background and add Adminlayout

---
 src/resources/vue/pages/admin/index.vue | 58 ++++++++++++-------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/resources/vue/pages/admin/index.vue b/src/resources/vue/pages/admin/index.vue
index 4ad684a..37ec8bb 100644
--- 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;

From bc72723db8fbf4cead204eed0ac228852696cd44 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 18 Jan 2024 09:55:48 +0100
Subject: [PATCH 3/5] feat: add href for home and active class

---
 src/resources/vue/layouts/admin-layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index 1a60928..e3700a5 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -7,7 +7,7 @@
     <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;">
+        <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>

From 06750d3e2672c6f3da17f014c2ce87920a96a940 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 18 Jan 2024 09:57:13 +0100
Subject: [PATCH 4/5] fix: active color

---
 src/resources/vue/layouts/admin-layout.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index e3700a5..f9a3cf3 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -78,6 +78,10 @@
 <style lang="scss" scoped>
   @import url("https://bootswatch.com/5/lumen/bootstrap.css");
 
+  .active {
+    background-color: #003bb2 !important;
+  }
+
   .slot {
     display: flex;
     width: 100%;

From d8f035894665b7c711fa3862940950e18d209631 Mon Sep 17 00:00:00 2001
From: Chris Friemann <github@chris.friemann.nl>
Date: Thu, 18 Jan 2024 10:57:02 +0100
Subject: [PATCH 5/5] feat: add active page nav

---
 src/resources/vue/layouts/admin-layout.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/resources/vue/layouts/admin-layout.vue b/src/resources/vue/layouts/admin-layout.vue
index f9a3cf3..9f4e87b 100644
--- a/src/resources/vue/layouts/admin-layout.vue
+++ b/src/resources/vue/layouts/admin-layout.vue
@@ -12,22 +12,22 @@
         </a>
       </li>
       <li>
-        <a href="#" class="nav-link link-light d-flex">
+        <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">
+        <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">
+        <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">
+        <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>