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/elements/buttons/skip-link.svelte

@@ -7,10 +7,17 @@
      * Target for the skip link to move focus to.
      */
     target?: string;
+    /**
+     * Text for the skip link button.
+     */
     text?: string;
+    /**
+     * Breakpoint at which the skip link is visible. Defaults to always being visible.
+     */
+    breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   }
 
-  let { target = 'main', text = $t('skip_to_content') }: Props = $props();
+  let { target = 'main', text = $t('skip_to_content'), breakpoint }: Props = $props();
 
   let isFocused = $state(false);
 
@@ -18,6 +25,29 @@
     const targetEl = document.querySelector<HTMLElement>(target);
     targetEl?.focus();
   };
+
+  const getBreakpoint = () => {
+    if (!breakpoint) {
+      return '';
+    }
+    switch (breakpoint) {
+      case 'sm': {
+        return 'hidden sm:block';
+      }
+      case 'md': {
+        return 'hidden md:block';
+      }
+      case 'lg': {
+        return 'hidden lg:block';
+      }
+      case 'xl': {
+        return 'hidden xl:block';
+      }
+      case '2xl': {
+        return 'hidden 2xl:block';
+      }
+    }
+  };
 </script>
 
 <div class="absolute z-50 top-2 left-2 transition-transform {isFocused ? 'translate-y-0' : '-translate-y-10 sr-only'}">
@@ -25,6 +55,7 @@
     size="sm"
     rounded="none"
     onclick={moveFocus}
+    class={getBreakpoint()}
     onfocus={() => (isFocused = true)}
     onblur={() => (isFocused = false)}
   >