refactor: sidebar (#18293)

web/src/lib/components/sidebar/sidebar.spec.ts

@@ -0,0 +1,80 @@
+import SideBarSection from '$lib/components/sidebar/sidebar.svelte';
+import { sidebarStore } from '$lib/stores/sidebar.svelte';
+import { render, screen } from '@testing-library/svelte';
+import { vi } from 'vitest';
+
+const mocks = vi.hoisted(() => {
+  return {
+    mobileDevice: {
+      isFullSidebar: false,
+    },
+  };
+});
+
+vi.mock('$lib/stores/mobile-device.svelte', () => ({
+  mobileDevice: mocks.mobileDevice,
+}));
+
+vi.mock('$lib/stores/sidebar.svelte', () => ({
+  sidebarStore: {
+    isOpen: false,
+    reset: vi.fn(),
+  },
+}));
+
+describe('Sidebar component', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    mocks.mobileDevice.isFullSidebar = false;
+    sidebarStore.isOpen = false;
+  });
+
+  it.each`
+    isFullSidebar | isSidebarOpen | expectedInert
+    ${false}      | ${false}      | ${true}
+    ${false}      | ${true}       | ${false}
+    ${true}       | ${false}      | ${false}
+    ${true}       | ${true}       | ${false}
+  `(
+    'inert is $expectedInert when isFullSidebar=$isFullSidebar and isSidebarOpen=$isSidebarOpen',
+    ({ isFullSidebar, isSidebarOpen, expectedInert }) => {
+      // setup
+      mocks.mobileDevice.isFullSidebar = isFullSidebar;
+      sidebarStore.isOpen = isSidebarOpen;
+
+      // when
+      render(SideBarSection);
+      const parent = screen.getByTestId('sidebar-parent');
+
+      // then
+      expect(parent.inert).toBe(expectedInert);
+    },
+  );
+
+  it('should set width when sidebar is expanded', () => {
+    // setup
+    mocks.mobileDevice.isFullSidebar = false;
+    sidebarStore.isOpen = true;
+
+    // when
+    render(SideBarSection);
+    const parent = screen.getByTestId('sidebar-parent');
+
+    // then
+    expect(parent.classList).toContain('sidebar:w-[16rem]'); // sets the initial width for page load
+    expect(parent.classList).toContain('w-[min(100vw,16rem)]');
+    expect(parent.classList).toContain('shadow-2xl');
+  });
+
+  it('should close the sidebar if it is open on initial render', () => {
+    // setup
+    mocks.mobileDevice.isFullSidebar = false;
+    sidebarStore.isOpen = true;
+
+    // when
+    render(SideBarSection);
+
+    // then
+    expect(sidebarStore.reset).toHaveBeenCalled();
+  });
+});

web/src/lib/components/sidebar/sidebar.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { clickOutside } from '$lib/actions/click-outside';
+  import { focusTrap } from '$lib/actions/focus-trap';
+  import { menuButtonId } from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
+  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
+  import { sidebarStore } from '$lib/stores/sidebar.svelte';
+  import { onMount, type Snippet } from 'svelte';
+
+  interface Props {
+    ariaLabel?: string;
+    children?: Snippet;
+  }
+
+  let { ariaLabel, children }: Props = $props();
+
+  const isHidden = $derived(!sidebarStore.isOpen && !mobileDevice.isFullSidebar);
+  const isExpanded = $derived(sidebarStore.isOpen && !mobileDevice.isFullSidebar);
+
+  onMount(() => {
+    closeSidebar();
+  });
+
+  const closeSidebar = () => {
+    if (!isExpanded) {
+      return;
+    }
+    sidebarStore.reset();
+    if (isHidden) {
+      document.querySelector<HTMLButtonElement>(`#${menuButtonId}`)?.focus();
+    }
+  };
+</script>
+
+<nav
+  id="sidebar"
+  aria-label={ariaLabel}
+  tabindex="-1"
+  class="immich-scrollbar relative z-[1] w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden pt-8 transition-all duration-200 bg-light"
+  class:shadow-2xl={isExpanded}
+  class:dark:border-e-immich-dark-gray={isExpanded}
+  class:border-r={isExpanded}
+  class:w-[min(100vw,16rem)]={sidebarStore.isOpen}
+  data-testid="sidebar-parent"
+  inert={isHidden}
+  use:clickOutside={{ onOutclick: closeSidebar, onEscape: closeSidebar }}
+  use:focusTrap={{ active: isExpanded }}
+>
+  <div class="pe-6 flex flex-col gap-1 h-max min-h-full">
+    {@render children?.()}
+  </div>
+</nav>