WIP: Implement admin CRUD

assets/controllers/sidebar_menu_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static classes = ['closed', 'iconClosed', 'iconExpanded']
+    static targets = ['submenu', 'button', 'icon']
+    static values = { expanded: Boolean }
+
+    toggleSubmenu() {
+        this.expandedValue = !this.expandedValue
+    }
+
+    expandedValueChanged(expanded) {
+        this.submenuTarget.classList.toggle(this.closedClass, false === expanded)
+        this.buttonTarget.setAttribute('aria-expanded', expanded)
+        if (false === this.hasIconTarget) {
+            return
+        }
+        if (true === expanded) {
+            this.iconTarget.classList.add(...this.iconExpandedClasses)
+            this.iconTarget.classList.remove(...this.iconClosedClasses)
+        } else {
+            this.iconTarget.classList.add(...this.iconClosedClasses)
+            this.iconTarget.classList.remove(...this.iconExpandedClasses)
+        }
+    }
+}

assets/images/icons.svg

@@ -141,6 +141,10 @@
     <symbol id="icon-folder" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
         <path d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" stroke-linecap="round" stroke-linejoin="round"/>
     </symbol>
+    <symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
+        <path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/>
+    </symbol>
     <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
     <symbol id="icon-spinner" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
         <g fill="none" fill-rule="evenodd" stroke-width="2">

assets/styles/_components.css

@@ -1,5 +1,5 @@
 @import "components/autocomplete.css";
 @import "components/button.css";
+@import "components/datatable.css";
 @import "components/datepicker.css";
-@import "components/menu.css";
 @import "components/toast.css";

assets/styles/components/button.css

@@ -1,5 +1,5 @@
 .btn {
-    @apply inline-flex justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 w-full shadow-md;
+    @apply inline-flex justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 shadow-md;
 }
 
 .btn--secondary {

assets/styles/components/datatable.css

@@ -0,0 +1,36 @@
+.data-table-wrapper {
+    @apply overflow-x-auto mb-8;
+}
+
+.data-table-wrapper__inner {
+    @apply align-middle inline-block min-w-full overflow-hidden;
+}
+
+table {
+    @apply min-w-full;
+}
+
+tbody {
+    @apply bg-white;
+}
+
+tr {
+    @apply border border-gray-300;
+}
+
+th {
+    @apply px-4 py-2 bg-gray-200 text-left text-sm xl:text-base leading-4 font-bold text-primary align-top;
+}
+
+td {
+    @apply px-4 py-2 text-sm leading-5 align-top;
+
+}
+
+table.horizontal td {
+    @apply py-4;
+}
+
+.data-table tbody tr {
+    @apply hover:bg-gray-100;
+}

assets/styles/components/menu.css

@@ -1,46 +0,0 @@
-.menu--header {
-    @apply flex items-center space-x-4 h-8;
-}
-
-.menu--main {
-    @apply flex flex-col divide-y divide-gray-200;
-}
-
-.menu--main > li {
-    @apply py-4 first:pt-0 last:pb-0;
-}
-
-.menu--mobile {
-    @apply flex-col space-x-0 h-auto divide-y divide-gray-200;
-}
-
-.menu--mobile li {
-    @apply py-4 w-full;
-}
-
-.menu a,
-.menu div {
-    @apply uppercase hover:text-slate-700 text-slate-900 text-sm lg:text-base;
-}
-
-.menu--mobile a {
-    @apply text-lg;
-}
-
-.menu ul {
-    @apply pl-7 pt-1;
-}
-
-.menu ul a {
-    @apply text-sm;
-}
-
-.menu .current > a,
-.menu .active > a {
-    @apply text-slate-900 font-bold;
-}
-
-.menu .icon-link,
-.menu .icon-section {
-    @apply flex items-center space-x-2;
-}