feat(web): expand/collapse sidebar (#16768)

* feat: expand/collapse sidebar

* fix: general PR cleanup

- add skip link unit test
- remove unused tailwind styles
- adjust asset grid spacing
- fix event propogation

* fix: cleaning up event listeners

* fix: purchase modal and button on small screens

* fix: explicit tailwind classes

* fix: no animation on initial page load

* fix: sidebar spacing and reactivity

* chore: reverting changes to icons in nav and account info panel

* fix: remove left margin from the asset grid after merging in new timeline

* chore: extract search-bar changes for a separate PR

* fix: add margin to memories

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -1,17 +1,56 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
+  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 { isSidebarOpen } from '$lib/stores/side-bar.svelte';
+  import { type Snippet } from 'svelte';
 
   interface Props {
     children?: Snippet;
   }
 
+  const mdBreakpoint = 768;
+
   let { children }: Props = $props();
+
+  let innerWidth: number = $state(0);
+
+  const closeSidebar = (width: number) => {
+    isSidebarOpen.value = width >= mdBreakpoint;
+  };
+
+  $effect(() => {
+    closeSidebar(innerWidth);
+  });
+
+  const isHidden = $derived(!isSidebarOpen.value && innerWidth < mdBreakpoint);
+  const isExpanded = $derived(isSidebarOpen.value && innerWidth < mdBreakpoint);
+
+  const handleClickOutside = () => {
+    if (!isSidebarOpen.value) {
+      return;
+    }
+    closeSidebar(innerWidth);
+    if (isHidden) {
+      document.querySelector<HTMLButtonElement>(`#${menuButtonId}`)?.focus();
+    }
+  };
 </script>
 
+<svelte:window bind:innerWidth />
 <section
   id="sidebar"
   tabindex="-1"
-  class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 max-md:pt-16 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
+  class="immich-scrollbar relative z-10 w-0 md:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
+  class:shadow-2xl={isExpanded}
+  class:dark:border-r-immich-dark-gray={isExpanded}
+  class:border-r={isExpanded}
+  class:w-[min(100vw,16rem)]={isSidebarOpen.value}
+  inert={isHidden}
+  use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}
+  use:focusTrap={{ active: isExpanded }}
 >
-  {@render children?.()}
+  <div class="pr-6 flex flex-col gap-1 h-max min-h-full">
+    {@render children?.()}
+  </div>
 </section>