From 4f8fd18a39a5d5e6e07d41cfe24fe23e125b4c9c Mon Sep 17 00:00:00 2001
From: mdatelle <mike@datelle.net>
Date: Thu, 31 Jul 2025 14:28:53 -0400
Subject: [PATCH] refactor: use Drawer component for mobile view navigation

---
 web/components/LayoutViews/Detail/Detail.vue  |  79 ++----
 .../Detail/DetailContentHeader.vue            |  12 +-
 .../Detail/DetailLeftNavigation.vue           | 242 +++++++++++++-----
 .../LayoutViews/Detail/DetailRightContent.vue |   2 +-
 4 files changed, 201 insertions(+), 134 deletions(-)

diff --git a/web/components/LayoutViews/Detail/Detail.vue b/web/components/LayoutViews/Detail/Detail.vue
index c29839d58..31f5bad7e 100644
--- a/web/components/LayoutViews/Detail/Detail.vue
+++ b/web/components/LayoutViews/Detail/Detail.vue
@@ -51,7 +51,6 @@ const selectedTab = ref(props.defaultTabKey || '0');
 const selectedItems = ref<string[]>([]);
 const expandedGroups = ref<Record<string, boolean>>({});
 const autostartEnabled = ref(true);
-const sidebarOpen = ref(false);
 
 // Initialize expanded state for groups
 const initializeExpandedState = () => {
@@ -127,76 +126,28 @@ const handleManageSelectedAction = (action: string) => {
 const handleManageItemAction = (action: string) => {
   console.log('Manage item action:', action);
 };
-
-const toggleSidebar = () => {
-  sidebarOpen.value = !sidebarOpen.value;
-};
-
-const closeSidebar = () => {
-  sidebarOpen.value = false;
-};
 </script>
 
 <template>
   <div class="flex flex-col lg:flex-row h-full">
-    <!-- Mobile sidebar backdrop -->
-    <div
-      v-if="sidebarOpen"
-      class="fixed inset-0 z-40 bg-black bg-opacity-20 lg:hidden"
-      @click="closeSidebar"
+    <!-- Navigation -->
+    <DetailLeftNavigation
+      :items="items"
+      :selected-id="selectedItemId"
+      :selected-items="selectedItems"
+      :expanded-groups="expandedGroups"
+      :navigation-label="navigationLabel"
+      @update:selected-id="selectedItemId = $event"
+      @update:selected-items="selectedItems = $event"
+      @update:expanded-groups="expandedGroups = $event"
+      @add="handleAddAction"
+      @select-all="selectAllItems"
+      @clear-all="clearAllSelections"
+      @manage-action="handleManageSelectedAction"
     />
 
-    <!-- Mobile navigation button -->
-    <div class="lg:hidden m-4">
-      <UButton color="primary" size="md" class="w-full justify-center" @click="toggleSidebar">
-        {{ navigationLabel }}
-      </UButton>
-    </div>
-
-    <!-- Navigation Sidebar -->
-    <div
-      :class="[
-        'fixed lg:block lg:relative inset-y-0 left-0 z-50 lg:z-auto',
-        'w-72 lg:w-auto flex-shrink-0',
-        'transform lg:transform-none transition-transform duration-300 ease-in-out',
-        sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
-        'bg-white dark:bg-gray-900 lg:bg-transparent',
-      ]"
-    >
-      <div class="h-full overflow-y-auto overflow-x-hidden p-4 lg:p-0">
-        <!-- Close button for mobile -->
-        <div class="lg:hidden flex justify-end mb-4">
-          <UButton
-            icon="i-lucide-x"
-            size="sm"
-            color="neutral"
-            variant="ghost"
-            square
-            @click="closeSidebar"
-          />
-        </div>
-
-        <DetailLeftNavigation
-          :items="items"
-          :selected-id="selectedItemId"
-          :selected-items="selectedItems"
-          :expanded-groups="expandedGroups"
-          @update:selected-id="
-            selectedItemId = $event;
-            closeSidebar();
-          "
-          @update:selected-items="selectedItems = $event"
-          @update:expanded-groups="expandedGroups = $event"
-          @add="handleAddAction"
-          @select-all="selectAllItems"
-          @clear-all="clearAllSelections"
-          @manage-action="handleManageSelectedAction"
-        />
-      </div>
-    </div>
-
     <!-- Main Content -->
-    <div class="flex-1 min-w-0 px-4 lg:px-0">
+    <div class="flex-1 min-w-0">
       <DetailRightContent
         :selected-item="selectedItem"
         :tabs="tabs"
diff --git a/web/components/LayoutViews/Detail/DetailContentHeader.vue b/web/components/LayoutViews/Detail/DetailContentHeader.vue
index 34ca054a0..5df175462 100644
--- a/web/components/LayoutViews/Detail/DetailContentHeader.vue
+++ b/web/components/LayoutViews/Detail/DetailContentHeader.vue
@@ -9,19 +9,19 @@ const _props = defineProps<Props>();
 
 <template>
   <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 sm:gap-6">
-    <div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 min-w-0">
-      <div class="flex items-center gap-3 sm:gap-4">
-        <UIcon v-if="icon" :name="icon" class="h-10 w-10 sm:h-8 sm:w-8 flex-shrink-0" />
-        <h1 class="text-2xl sm:text-2xl font-semibold truncate">
+    <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 min-w-0">
+      <div class="flex items-center gap-3 mb-2 sm:gap-4 lg:mb-0">
+        <UIcon v-if="icon" :name="icon" class="h-8 w-8 flex-shrink-0" />
+        <h1 class="text-2xl font-semibold truncate leading-none">
           {{ title }}
         </h1>
       </div>
-      <div class="flex items-center gap-2 flex-wrap sm:mt-0">
+      <div class="flex items-center gap-2 flex-wrap">
         <slot name="right-content" />
       </div>
     </div>
 
-    <div class="flex-shrink-0">
+    <div class="flex items-center flex-shrink-0">
       <slot name="controls" />
     </div>
   </div>
diff --git a/web/components/LayoutViews/Detail/DetailLeftNavigation.vue b/web/components/LayoutViews/Detail/DetailLeftNavigation.vue
index a718249e3..5483cc6a9 100644
--- a/web/components/LayoutViews/Detail/DetailLeftNavigation.vue
+++ b/web/components/LayoutViews/Detail/DetailLeftNavigation.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+
 import type { Item } from './Detail.vue';
 
 interface Props {
@@ -10,6 +11,7 @@ interface Props {
   expandedGroups: Record<string, boolean>;
   showHeader?: boolean;
   manageActions?: Array<{ label: string; icon: string; onClick?: () => void }>;
+  navigationLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -21,6 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
     { label: 'Restart', icon: 'i-lucide-refresh-cw' },
     { label: 'Remove', icon: 'i-lucide-trash-2' },
   ],
+  navigationLabel: 'Select Item',
 });
 
 const emit = defineEmits<{
@@ -33,6 +36,13 @@ const emit = defineEmits<{
   manageAction: [action: string];
 }>();
 
+// Internal drawer state for mobile
+const sidebarOpen = ref(false);
+
+const toggleSidebar = () => {
+  sidebarOpen.value = !sidebarOpen.value;
+};
+
 const navigationMenuItems = computed(() =>
   props.items.map((item) => ({
     label: item.label,
@@ -82,6 +92,7 @@ const allItemsWithSlots = computed(() => {
       if (item.slot) {
         items.push(item);
       }
+
       if (item.children) {
         collectItems(item.children);
       }
@@ -98,12 +109,14 @@ const allItemsSelected = computed(() => {
       if (!item.isGroup) {
         allSelectableItems.push(item.id);
       }
+
       if (item.children) {
         collectSelectableItems(item.children);
       }
     }
   };
   collectSelectableItems(props.items);
+
   return (
     allSelectableItems.length > 0 && allSelectableItems.every((id) => props.selectedItems.includes(id))
   );
@@ -118,17 +131,20 @@ const selectNavigationItem = (id: string) => {
 
   if (actualItem && !actualItem.isGroup) {
     emit('update:selectedId', id);
+    sidebarOpen.value = false; // Close drawer on mobile when item is selected
   }
 };
 
 const toggleItemSelection = (itemId: string) => {
   const newItems = [...props.selectedItems];
   const index = newItems.indexOf(itemId);
+
   if (index > -1) {
     newItems.splice(index, 1);
   } else {
     newItems.push(itemId);
   }
+
   emit('update:selectedItems', newItems);
 };
 
@@ -138,6 +154,7 @@ const isItemSelected = (itemId: string) => {
 
 const toggleGroupExpansion = (groupId: string) => {
   const newGroups = { ...props.expandedGroups };
+
   newGroups[groupId] = !newGroups[groupId];
   emit('update:expandedGroups', newGroups);
 };
@@ -147,80 +164,179 @@ const handleManageAction = (action: { label: string; icon: string }) => {
 };
 
 const dropdownItems = computed(() =>
-  props.manageActions.map(action => ({
+  props.manageActions.map((action) => ({
     label: action.label,
     icon: action.icon,
-    onSelect: () => handleManageAction(action)
+    onSelect: () => handleManageAction(action),
   }))
 );
 </script>
 
 <template>
-  <div class="w-full lg:mr-16 lg:w-72 lg:flex-shrink-0">
-    <div v-if="showHeader" class="mb-6">
-      <div class="flex items-center justify-between mb-3">
-        <h2 class="text-lg font-semibold">{{ title }}</h2>
-        <UButton
-          icon="i-lucide-plus"
-          size="sm"
-          color="primary"
-          variant="ghost"
-          square
-          @click="$emit('add')"
-        />
-      </div>
+  <div>
+    <!-- Desktop navigation -->
+    <div class="hidden lg:block lg:mr-16">
+      <div class="h-full overflow-y-auto overflow-x-hidden">
+        <!-- Navigation Header -->
+        <div v-if="showHeader" class="mb-6">
+          <div class="flex items-center justify-between mb-3">
+            <h2 class="text-lg font-semibold">{{ title }}</h2>
+            <UButton
+              icon="i-lucide-plus"
+              size="sm"
+              color="primary"
+              variant="ghost"
+              square
+              @click="$emit('add')"
+            />
+          </div>
 
-      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
-        <UButton
-          variant="link"
-          color="primary"
-          size="sm"
-          :label="allItemsSelected ? 'Clear all' : 'Select all'"
-          @click="allItemsSelected ? $emit('clearAll') : $emit('selectAll')"
-        />
+          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+            <UButton
+              variant="link"
+              color="primary"
+              size="sm"
+              :label="allItemsSelected ? 'Clear all' : 'Select all'"
+              @click="allItemsSelected ? $emit('clearAll') : $emit('selectAll')"
+            />
 
-        <UDropdownMenu :items="dropdownItems">
-          <UButton
-            variant="subtle"
-            color="primary"
-            size="sm"
-            trailing-icon="i-lucide-chevron-down"
-            :disabled="selectedItemsCount === 0"
-            class="w-full sm:w-auto"
-          >
-            <span class="sm:hidden">Manage ({{ selectedItemsCount }})</span>
-            <span class="hidden sm:inline">Manage Selected ({{ selectedItemsCount }})</span>
-          </UButton>
-        </UDropdownMenu>
+            <UDropdownMenu :items="dropdownItems">
+              <UButton
+                variant="subtle"
+                color="primary"
+                size="sm"
+                trailing-icon="i-lucide-chevron-down"
+                :disabled="selectedItemsCount === 0"
+                class="w-full sm:w-auto"
+              >
+                <span class="sm:hidden">Manage ({{ selectedItemsCount }})</span>
+                <span class="hidden sm:inline">Manage Selected ({{ selectedItemsCount }})</span>
+              </UButton>
+            </UDropdownMenu>
+          </div>
+        </div>
+
+        <!-- Navigation Menu -->
+        <UNavigationMenu :items="navigationMenuItems" orientation="vertical">
+          <template v-for="item in allItemsWithSlots" :key="`slot-${item.id}`" #[item.slot!]>
+            <div
+              class="flex items-center gap-3 mb-2 min-w-0"
+              @click="
+                item.children && item.children.length > 0 ? toggleGroupExpansion(item.id) : undefined
+              "
+            >
+              <UCheckbox
+                :model-value="isItemSelected(item.id)"
+                class="flex-shrink-0"
+                @update:model-value="toggleItemSelection(item.id)"
+                @click.stop
+              />
+              <UIcon v-if="item.icon" :name="item.icon" class="h-5 w-5 flex-shrink-0" />
+              <span class="truncate flex-1 min-w-0">{{ item.label }}</span>
+              <UBadge v-if="item.badge" size="xs" :label="String(item.badge)" class="flex-shrink-0" />
+
+              <UIcon
+                v-if="item.children?.length"
+                name="i-lucide-chevron-down"
+                :class="[
+                  'h-5 w-5 text-gray-400 transition-transform duration-200 flex-shrink-0',
+                  expandedGroups[item.id] ? 'rotate-180' : 'rotate-0',
+                ]"
+              />
+            </div>
+          </template>
+        </UNavigationMenu>
       </div>
     </div>
 
-    <UNavigationMenu :items="navigationMenuItems" orientation="vertical">
-      <template v-for="item in allItemsWithSlots" :key="`slot-${item.id}`" #[item.slot!]>
-        <div
-          class="flex items-center gap-3 mb-2 min-w-0"
-          @click="item.children && item.children.length > 0 ? toggleGroupExpansion(item.id) : undefined"
-        >
-          <UCheckbox
-            :model-value="isItemSelected(item.id)"
-            class="flex-shrink-0"
-            @update:model-value="toggleItemSelection(item.id)"
-            @click.stop
-          />
-          <UIcon v-if="item.icon" :name="item.icon" class="h-5 w-5 flex-shrink-0" />
-          <span class="truncate flex-1 min-w-0">{{ item.label }}</span>
-          <UBadge v-if="item.badge" size="xs" :label="String(item.badge)" class="flex-shrink-0" />
+    <!-- Mobile UDrawer -->
+    <div class="lg:hidden">
+      <div class="m-4">
+        <UButton color="primary" size="md" class="w-full justify-center" @click="toggleSidebar">
+          {{ navigationLabel }}
+        </UButton>
+      </div>
 
-          <UIcon
-            v-if="item.children?.length"
-            name="i-lucide-chevron-down"
-            :class="[
-              'h-5 w-5 text-gray-400 transition-transform duration-200 flex-shrink-0',
-              expandedGroups[item.id] ? 'rotate-180' : 'rotate-0',
-            ]"
-          />
-        </div>
-      </template>
-    </UNavigationMenu>
+      <UDrawer v-model:open="sidebarOpen" direction="left" size="md">
+        <template #content>
+          <div class="h-full overflow-y-auto overflow-x-hidden p-4">
+            <!-- Navigation Header -->
+            <div v-if="showHeader" class="mb-6">
+              <div class="flex items-center justify-between mb-3">
+                <h2 class="text-lg font-semibold">{{ title }}</h2>
+                <UButton
+                  icon="i-lucide-plus"
+                  size="sm"
+                  color="primary"
+                  variant="ghost"
+                  square
+                  @click="$emit('add')"
+                />
+              </div>
+
+              <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+                <UButton
+                  variant="link"
+                  color="primary"
+                  size="sm"
+                  :label="allItemsSelected ? 'Clear all' : 'Select all'"
+                  @click="allItemsSelected ? $emit('clearAll') : $emit('selectAll')"
+                />
+
+                <UDropdownMenu :items="dropdownItems">
+                  <UButton
+                    variant="subtle"
+                    color="primary"
+                    size="sm"
+                    trailing-icon="i-lucide-chevron-down"
+                    :disabled="selectedItemsCount === 0"
+                    class="w-full sm:w-auto"
+                  >
+                    <span class="sm:hidden">Manage ({{ selectedItemsCount }})</span>
+                    <span class="hidden sm:inline">Manage Selected ({{ selectedItemsCount }})</span>
+                  </UButton>
+                </UDropdownMenu>
+              </div>
+            </div>
+
+            <!-- Navigation Menu -->
+            <UNavigationMenu :items="navigationMenuItems" orientation="vertical">
+              <template v-for="item in allItemsWithSlots" :key="`slot-${item.id}`" #[item.slot!]>
+                <div
+                  class="flex items-center gap-4 mb-2 min-w-0"
+                  @click="
+                    item.children && item.children.length > 0 ? toggleGroupExpansion(item.id) : undefined
+                  "
+                >
+                  <UCheckbox
+                    :model-value="isItemSelected(item.id)"
+                    class="flex-shrink-0"
+                    @update:model-value="toggleItemSelection(item.id)"
+                    @click.stop
+                  />
+                  <UIcon v-if="item.icon" :name="item.icon" class="h-5 w-5 flex-shrink-0" />
+                  <span class="truncate flex-1 min-w-0">{{ item.label }}</span>
+                  <UBadge
+                    v-if="item.badge"
+                    size="xs"
+                    :label="String(item.badge)"
+                    class="flex-shrink-0"
+                  />
+
+                  <UIcon
+                    v-if="item.children?.length"
+                    name="i-lucide-chevron-down"
+                    :class="[
+                      'h-5 w-5 text-gray-400 transition-transform duration-200 flex-shrink-0',
+                      expandedGroups[item.id] ? 'rotate-180' : 'rotate-0',
+                    ]"
+                  />
+                </div>
+              </template>
+            </UNavigationMenu>
+          </div>
+        </template>
+      </UDrawer>
+    </div>
   </div>
 </template>
diff --git a/web/components/LayoutViews/Detail/DetailRightContent.vue b/web/components/LayoutViews/Detail/DetailRightContent.vue
index b7213f819..6af5c47f0 100644
--- a/web/components/LayoutViews/Detail/DetailRightContent.vue
+++ b/web/components/LayoutViews/Detail/DetailRightContent.vue
@@ -62,7 +62,7 @@ const updateSelectedTab = (value: string | number) => {
 </script>
 
 <template>
-  <div class="flex-1 min-w-0">
+  <div class="flex-1 min-w-0 px-4 lg:px-0">
     <div v-if="showHeader && selectedItem" class="mb-6">
       <slot name="header" :item="selectedItem" />
     </div>