gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-23 11:46:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace collapsible sidebars with hover-based expansion

Browse Source 
Removed chevron toggle buttons from Settings and Alerts navigation sidebars. Sidebars now expand automatically on hover and collapse on mouse leave, providing a cleaner interface and more intuitive interaction pattern.
This commit is contained in:
rcourtman
2025-10-11 20:26:15 +00:00
parent a4c3f1605c
commit 052a6dd03f
2 changed files with 16 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Settings/Settings.tsx
+8 -19
View File
@@ -211,7 +211,7 @@ const Settings: Component<SettingsProps> = (props) => {
});
const [hasUnsavedChanges, setHasUnsavedChanges] = createSignal(false);
const [sidebarCollapsed, setSidebarCollapsed] = createSignal(false);
const [sidebarCollapsed, setSidebarCollapsed] = createSignal(true);
const [nodes, setNodes] = createSignal<NodeConfigWithStatus[]>([]);
const [discoveredNodes, setDiscoveredNodes] = createSignal<DiscoveredServer[]>([]);
const [showNodeModal, setShowNodeModal] = createSignal(false);
@@ -1145,24 +1145,13 @@ const Settings: Component<SettingsProps> = (props) => {
</Show>
<Card padding="none" class="relative lg:flex">
<div class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-300`}>
<button
type="button"
class="hidden lg:flex absolute top-6 right-0 translate-x-1/2 transform z-20 h-7 w-7 items-center justify-center rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md transition-all duration-200"
onClick={() => setSidebarCollapsed(!sidebarCollapsed())}
aria-label={sidebarCollapsed() ? "Expand settings navigation" : "Collapse settings navigation"}
aria-expanded={!sidebarCollapsed()}
aria-controls="settings-sidebar-menu"
>
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<Show when={sidebarCollapsed()}>
<path d="M9 6l6 6-6 6" />
</Show>
<Show when={!sidebarCollapsed()}>
<path d="M15 18l-6-6 6-6" />
</Show>
</svg>
</button>
<div
class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-300`}
onMouseEnter={() => setSidebarCollapsed(false)}
onMouseLeave={() => setSidebarCollapsed(true)}
aria-label="Settings navigation"
aria-expanded={!sidebarCollapsed()}
>
<div class={`sticky top-24 ${sidebarCollapsed() ? 'px-2' : 'px-5'} py-6 space-y-6 transition-all duration-300`}>
<div id="settings-sidebar-menu" class="space-y-6">
<For each={tabGroups}>
frontend-modern/src/pages/Alerts.tsx
+8 -19
View File
@@ -1053,7 +1053,7 @@ const [timeThresholds, setTimeThresholds] = createSignal({
];
const flatTabs = tabGroups.flatMap((group) => group.items);
const [sidebarCollapsed, setSidebarCollapsed] = createSignal(false);
const [sidebarCollapsed, setSidebarCollapsed] = createSignal(true);
return (
<div class="space-y-4">
@@ -1225,24 +1225,13 @@ const [timeThresholds, setTimeThresholds] = createSignal({
</Show>
<Card padding="none" class="relative lg:flex">
<div class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-300`}>
<button
type="button"
class="hidden lg:flex absolute top-6 right-0 translate-x-1/2 transform z-20 h-7 w-7 items-center justify-center rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md transition-all duration-200"
onClick={() => setSidebarCollapsed(!sidebarCollapsed())}
aria-label={sidebarCollapsed() ? "Expand alerts navigation" : "Collapse alerts navigation"}
aria-expanded={!sidebarCollapsed()}
aria-controls="alerts-sidebar-menu"
>
<svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<Show when={sidebarCollapsed()}>
<path d="M9 6l6 6-6 6" />
</Show>
<Show when={!sidebarCollapsed()}>
<path d="M15 18l-6-6 6-6" />
</Show>
</svg>
</button>
<div
class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-300`}
onMouseEnter={() => setSidebarCollapsed(false)}
onMouseLeave={() => setSidebarCollapsed(true)}
aria-label="Alerts navigation"
aria-expanded={!sidebarCollapsed()}
>
<div class={`sticky top-24 ${sidebarCollapsed() ? 'px-2' : 'px-5'} py-6 space-y-6 transition-all duration-300`}>
<div id="alerts-sidebar-menu" class="space-y-6">
<For each={tabGroups}>