feat(#5099): implement collapsible sidebar functionality and improve layout

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="as"
-    class="btn relative items-center"
+    class="btn items-center"
     v-bind="componentAttrs"
     @click="handleClick"
   >

spring-boot-admin-server-ui/src/main/frontend/components/sba-sticky-subnav.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="subnavigation"
-    class="sticky shadow-sm top-14 w-full bg-white py-1 px-2 md:px-6 backdrop-filter backdrop-blur bg-opacity-40 z-20 drop-shadow-lg"
+    class="sticky shadow-sm top-0 w-full bg-white py-1 px-2 md:px-6 backdrop-filter backdrop-blur bg-opacity-40 z-20 drop-shadow-lg"
   >
     <slot />
   </div>

spring-boot-admin-server-ui/src/main/frontend/directives/sticks-below.ts

@@ -22,7 +22,7 @@ const mounted = (el, binding) => {
   const targetElement = document.querySelector(binding.value);
   if (targetElement) {
     const clientRect = targetElement.getBoundingClientRect();
-    const top = clientRect.height + clientRect.top;
+    const top = clientRect.height;
 
     el.style.top = `${top}px`;
     el.style.position = 'sticky';

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/InstanceShell.vue

@@ -15,31 +15,55 @@
   -->
 
 <template>
-  <div class="h-full">
+  <div class="flex h-full">
     <sba-wave />
-    <div class="h-full">
+    <div
+      class="flex-shrink-0 flex flex-col transition-all duration-300 ease-in-out bg-white border-r relative overflow-hidden pb-14"
+      :class="{
+        'w-8': !sidebarOpen,
+        'w-64 overflow-y-auto': sidebarOpen,
+      }"
+    >
+      <button
+        aria-label="Toggle sidebar"
+        class="bg-sba-50 mx-[0.25rem] mt-[0.25rem] p-1 text-xs"
+        :class="{
+          'text-center': !sidebarOpen,
+          'text-right': sidebarOpen,
+        }"
+        @click="toggleSidebar"
+      >
+        <font-awesome-icon
+          :icon="faAngleDoubleLeft"
+          class="transition-all"
+          :class="{
+            'rotate-0': sidebarOpen,
+            'rotate-180': !sidebarOpen,
+          }"
+        />
+      </button>
       <Sidebar
         v-if="instance"
+        v-show="sidebarOpen"
         :key="instanceId"
         :application="application"
         :instance="instance"
         :views="sidebarViews"
       />
-      <main
-        class="min-h-full h-full relative z-0 ml-10 md:ml-60 transition-all"
-      >
-        <router-view
-          v-if="instance"
-          :application="application"
-          :instance="instance"
-        />
-      </main>
     </div>
+    <main class="flex-1 overflow-y-auto relative">
+      <router-view
+        v-if="instance"
+        :application="application"
+        :instance="instance"
+      />
+    </main>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useViewRegistry } from '@/composables/ViewRegistry';
@@ -51,6 +75,11 @@ const { applications } = useApplicationStore();
 const { views } = useViewRegistry();
 const route = useRoute();
 
+const SIDEBAR_STORAGE_KEY = 'de.codecentric.spring-boot-admin.sidebar';
+const sidebarOpen = ref(
+  localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true' || true,
+);
+
 const instanceId = computed(() => {
   return route.params.instanceId;
 });
@@ -71,4 +100,9 @@ const application = computed(() => {
 const instance = computed(() => {
   return findInstance(applications.value, instanceId.value);
 });
+
+const toggleSidebar = () => {
+  sidebarOpen.value = !sidebarOpen.value;
+  localStorage.setItem(SIDEBAR_STORAGE_KEY, String(sidebarOpen.value));
+};
 </script>

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/sidebar.vue

@@ -16,10 +16,9 @@
 
 <template>
   <aside
-    :class="{ 'w-60': sidebarOpen }"
-    class="h-full flex flex-col bg-white border-r backdrop-filter backdrop-blur-lg bg-opacity-80 z-40 w-10 md:w-60 transition-all left-0 pb-14 fixed"
+    class="flex flex-col bg-white backdrop-filter backdrop-blur-lg bg-opacity-80 transition-all"
   >
-    <ul class="relative px-1 py-1 overflow-y-auto">
+    <ul class="relative px-1 py-1">
       <!-- Instance info block -->
       <li class="relative mb-1 hidden md:block">
         <router-link
@@ -37,13 +36,6 @@
         </router-link>
       </li>
 
-      <!-- sm: button toggle navigation -->
-      <li class="block md:hidden mb-1">
-        <a class="navbar-link navbar-link__group" @click.stop="toggleSidebar">
-          <font-awesome-icon :icon="['fas', 'bars']" />
-        </a>
-      </li>
-
       <!-- The actual nav -->
       <li
         v-for="group in groups"
@@ -91,7 +83,6 @@
         <!-- Le subnav -->
         <ul
           v-if="hasMultipleViews(group) && isActiveGroup(group)"
-          :class="{ 'hidden md:block': !sidebarOpen }"
           class="relative block"
         >
           <li
@@ -119,10 +110,7 @@
         </Divider>
 
         <li>
-          <ul
-            :class="{ 'hidden md:block': !sidebarOpen }"
-            class="relative block"
-          >
+          <ul class="relative block">
             <li
               v-for="view in customLinksFromMetadata"
               :key="view.name"
@@ -165,7 +153,7 @@
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Divider } from 'primevue';
-import { computed, h, ref, toRaw, watch } from 'vue';
+import { computed, h, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -182,7 +170,6 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const route = useRoute();
-const sidebarOpen = ref(false);
 
 const customLinksFromMetadata = computed(() => {
   const newVar = props.instance.metadataParsed?.sidebar?.links || [];
@@ -229,17 +216,6 @@ const groups = computed(() => {
   return Array.from(groups.values());
 });
 
-watch(
-  () => route.fullPath,
-  () => {
-    sidebarOpen.value = false;
-  },
-);
-
-function toggleSidebar() {
-  sidebarOpen.value = !sidebarOpen.value;
-}
-
 function getGroupTitle(groupId: string) {
   const key = 'sidebar.' + groupId + '.title';
   const translated = t(key);