feat(#5099): implement collapsible sidebar functionality

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/utils/createInitials.ts

@@ -0,0 +1,14 @@
+export function createInitials(input: string, maxLength: number = 3): string {
+  const trimmed = input.trim();
+  if (!trimmed) return '';
+
+  const words = trimmed
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .split(/[\s\-_]+/)
+    .filter((word) => word.length > 0);
+
+  return words
+    .slice(0, maxLength) // Limit to maxLength words
+    .map((word) => word[0].toUpperCase())
+    .join('');
+}

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { faSquareCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+defineEmits<{
+  (e: 'toggle-sidebar'): void;
+}>();
+withDefaults(
+  defineProps<{
+    open?: boolean;
+  }>(),
+  {
+    open: false,
+  },
+);
+</script>
+
+<template>
+  <button @click="() => $emit('toggle-sidebar')">
+    <font-awesome-icon
+      :icon="faSquareCaretLeft"
+      :class="{
+        'rotate-180': !open,
+      }"
+    />
+  </button>
+</template>

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

@@ -15,42 +15,87 @@
   -->
 
 <template>
-  <div class="h-full">
+  <div class="flex h-full">
     <sba-wave />
-    <div class="h-full">
-      <Sidebar
-        v-if="instance"
-        :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
+    <div
+      class="flex-shrink-0 flex flex-col transition-all duration-300 ease-in-out bg-white border-r relative overflow-hidden"
+      :class="{
+        'w-12': !sidebarOpen,
+        'w-64': sidebarOpen,
+      }"
+    >
+      <div v-if="instance" class="px-1 py-1">
+        <div
+          v-if="!sidebarOpen"
+          class="rounded bg-sba-50 text-center aspect-square flex items-center overflow-hidden text-xs"
+        >
+          <CollapseSidebarButton @toggle-sidebar="toggleSidebar" />
+        </div>
+        <div
+          v-if="sidebarOpen"
+          class="relative hidden md:block bg-sba-50 bg-opacity-40 text-sba-900 text-sm py-4 pl-6 pr-2 text-left overflow-hidden text-ellipsis rounded transition duration-300 ease-in-out cursor-pointer"
+        >
+          <router-link
+            :to="{
+              name: 'instances/details',
+              params: { instanceId: instance.id },
+            }"
+          >
+            <span class="overflow-hidden text-ellipsis">
+              <div class="font-bold" v-text="instance.registration.name" />
+              <div>
+                <small><em v-text="instance.id" /></small>
+              </div>
+            </span>
+          </router-link>
+          <CollapseSidebarButton
+            class="absolute top-1 right-1 p-1 rounded focus:outline-none focus:ring focus:ring-sba-300"
+            open
+            @toggle-sidebar="toggleSidebar"
+          />
+        </div>
+      </div>
+      <div class="fex-1 overflow-y-auto">
+        <Sidebar
           v-if="instance"
+          :key="instanceId"
+          :open="sidebarOpen"
           :application="application"
           :instance="instance"
+          :views="sidebarViews"
         />
-      </main>
+      </div>
     </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 { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useViewRegistry } from '@/composables/ViewRegistry';
 import { useApplicationStore } from '@/composables/useApplicationStore';
 import { findApplicationForInstance, findInstance } from '@/store';
-import Sidebar from '@/views/instances/shell/sidebar';
+import { createInitials } from '@/utils/createInitials';
+import CollapseSidebarButton from '@/views/instances/shell/CollapseSidebarButton.vue';
+import Sidebar from '@/views/instances/shell/sidebar.vue';
 
 const { applications } = useApplicationStore();
 const { views } = useViewRegistry();
 const route = useRoute();
 
+const SIDEBAR_STORAGE_KEY = 'de.codecentric.spring-boot-admin.sidebar';
+const sidebarOpen = ref<boolean>(
+  localStorage.getItem(SIDEBAR_STORAGE_KEY) === 'true' || true,
+);
+
 const instanceId = computed(() => {
   return route.params.instanceId;
 });
@@ -71,4 +116,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>