From 50109bc283ca40262490c471f75820d26e9e65ab Mon Sep 17 00:00:00 2001
From: Daniel Ponte <amigan@gmail.com>
Date: Thu, 7 Nov 2024 08:43:41 -0500
Subject: [PATCH] sidebar

---
 client/admin/src/app/app.component.html       | 51 ++++++++++++++++---
 .../app/talkgroups/talkgroups.component.html  |  2 +-
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/client/admin/src/app/app.component.html b/client/admin/src/app/app.component.html
index 76c7887..24e36e2 100644
--- a/client/admin/src/app/app.component.html
+++ b/client/admin/src/app/app.component.html
@@ -116,15 +116,50 @@
 }
 <!-- ========== END HEADER ========== -->
 
-<!-- Sidebar -->
 @if (auth.loggedIn) {
-  <div
-    id="hs-application-sidebar"
-    class="hs-overlay [--auto-close:lg] hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform w-[260px] h-full hidden fixed inset-y-0 start-0 z-[60] bg-white border-e border-gray-200 lg:block lg:translate-x-0 lg:end-auto lg:bottom-0 dark:bg-neutral-800 dark:border-neutral-700"
-    role="dialog"
-    tabindex="-1"
-    aria-label="Sidebar"
-  >
+  <div class="-mt-px">
+    <!-- Breadcrumb -->
+    <div class="sticky top-0 inset-x-0 z-20 bg-white border-y px-4 sm:px-6 lg:px-8 lg:hidden dark:bg-neutral-800 dark:border-neutral-700">
+      <div class="flex items-center py-2">
+        <!-- Navigation Toggle -->
+        <button type="button" class="size-8 flex justify-center items-center gap-x-2 border border-gray-200 text-gray-800 hover:text-gray-500 rounded-lg focus:outline-none focus:text-gray-500 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-700 dark:text-neutral-200 dark:hover:text-neutral-500 dark:focus:text-neutral-500" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-application-sidebar" aria-label="Toggle navigation" data-hs-overlay="#hs-application-sidebar">
+          <span class="sr-only">Toggle Navigation</span>
+          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect width="18" height="18" x="3" y="3" rx="2" />
+            <path d="M15 3v18" />
+            <path d="m8 9 3 3-3 3" />
+          </svg>
+        </button>
+        <!-- End Navigation Toggle -->
+
+        <!-- Breadcrumb -->
+        <ol class="ms-3 flex items-center whitespace-nowrap">
+          <li class="flex items-center text-sm text-gray-800 dark:text-neutral-400">
+            Application Layout
+            <svg class="shrink-0 mx-3 overflow-visible size-2.5 text-gray-400 dark:text-neutral-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            </svg>
+          </li>
+          <li class="text-sm font-semibold text-gray-800 truncate dark:text-neutral-400" aria-current="page">
+            Dashboard
+          </li>
+        </ol>
+        <!-- End Breadcrumb -->
+      </div>
+    </div>
+    <!-- End Breadcrumb -->
+  </div>
+
+<!-- Sidebar -->
+ <div id="hs-application-sidebar" class="hs-overlay  [--auto-close:lg]
+    hs-overlay-open:translate-x-0
+    -translate-x-full transition-all duration-300 transform
+    w-[260px] h-full
+    hidden
+    fixed inset-y-0 start-0 z-[60]
+    bg-white border-e border-gray-200
+    lg:block lg:translate-x-0 lg:end-auto lg:bottom-0
+    dark:bg-neutral-800 dark:border-neutral-700" role="dialog" tabindex="-1" aria-label="Sidebar">
     <div class="relative flex flex-col h-full max-h-full">
       <div class="px-6 pt-4">
         <!-- Logo -->
diff --git a/client/admin/src/app/talkgroups/talkgroups.component.html b/client/admin/src/app/talkgroups/talkgroups.component.html
index 1e15fcb..9b8d7ff 100644
--- a/client/admin/src/app/talkgroups/talkgroups.component.html
+++ b/client/admin/src/app/talkgroups/talkgroups.component.html
@@ -1,4 +1,4 @@
-<div class="w-3/5 justify-center overflow-x-auto">
+<div class="w-100 justify-center overflow-x-auto">
   <table class="table">
     <!-- head -->
     <thead>