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/storage-space.svelte

@@ -46,7 +46,7 @@
 </script>
 
 <div
-  class="hidden md:block storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm"
+  class="storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ml-4 rounded-lg text-sm min-w-52"
   title={$t('storage_usage', {
     values: {
       used: getByteUnitString(usedBytes, $locale, 3),
@@ -54,26 +54,24 @@
     },
   })}
 >
-  <div class="hidden group-hover:sm:block md:block">
-    <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+  <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
 
-    {#if userInteraction.serverInfo}
-      <p class="text-gray-500 dark:text-gray-300">
-        {$t('storage_usage', {
-          values: {
-            used: getByteUnitString(usedBytes, $locale),
-            available: getByteUnitString(availableBytes, $locale),
-          },
-        })}
-      </p>
+  {#if userInteraction.serverInfo}
+    <p class="text-gray-500 dark:text-gray-300">
+      {$t('storage_usage', {
+        values: {
+          used: getByteUnitString(usedBytes, $locale),
+          available: getByteUnitString(availableBytes, $locale),
+        },
+      })}
+    </p>
 
-      <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-        <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
-      </div>
-    {:else}
-      <div class="mt-2">
-        <LoadingSpinner />
-      </div>
-    {/if}
-  </div>
+    <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+      <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
+    </div>
+  {:else}
+    <div class="mt-2">
+      <LoadingSpinner />
+    </div>
+  {/if}
 </div>