feat: add stylish animation for secondary side nav

src/lib/helpers/transition.ts

@@ -0,0 +1,48 @@
+import { cubicOut } from 'svelte/easing';
+import type { EasingFunction, TransitionConfig } from 'svelte/transition';
+
+export interface SlideParams {
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+    axis?: 'x' | 'y';
+}
+
+export function slide(
+    node: Element,
+    { delay = 0, duration = 400, easing = cubicOut, axis = 'y' }: SlideParams = {}
+): TransitionConfig {
+    const style = getComputedStyle(node);
+    const opacity = +style.opacity;
+    const primary_property = axis === 'y' ? 'height' : 'width';
+    const primary_property_value = parseFloat(style[primary_property]);
+    const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'];
+    const capitalized_secondary_properties = secondary_properties.map(
+        (e) => `${e[0].toUpperCase()}${e.slice(1)}`
+    );
+    const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]);
+    const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]);
+    const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]);
+    const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]);
+    const border_width_start_value = parseFloat(
+        style[`border${capitalized_secondary_properties[0]}Width`]
+    );
+    const border_width_end_value = parseFloat(
+        style[`border${capitalized_secondary_properties[1]}Width`]
+    );
+    return {
+        delay,
+        duration,
+        easing,
+        css: (t) =>
+            'overflow: hidden;' +
+            `opacity: ${Math.min(t * 20, 1) * opacity};` +
+            `${primary_property}: ${t * primary_property_value}px;` +
+            `padding-${secondary_properties[0]}: ${t * padding_start_value}px;` +
+            `padding-${secondary_properties[1]}: ${t * padding_end_value}px;` +
+            `margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
+            `margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
+            `border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
+            `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
+    };
+}

src/lib/layout/navigation.svelte

@@ -2,6 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { trackEvent } from '$lib/actions/analytics';
+    import { slide } from '$lib/helpers/transition';
 
     $: project = $page.params.project;
     $: projectPath = `${base}/console/project-${project}`;
@@ -18,7 +19,7 @@
     }
 </script>
 
-<div class="side-nav">
+<div class="side-nav" class:hasSecondSideNav>
     <div class="side-nav-level-1" class:is-narrow={narrow}>
         {#if project}
             <div class="side-nav-main">
@@ -118,7 +119,7 @@
     </div>
 
     {#if secondSideNav}
-        <div class="side-nav-level-2 is-open">
+        <div class="side-nav-level-2 is-open" transition:slide={{ axis: 'x', duration: 250 }}>
             <div class="side-nav-main">
                 <svelte:component this={secondSideNav} />
             </div>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/secondSideNav.svelte

@@ -5,8 +5,9 @@
     import type { PageData } from './[[page]]/$types';
 
     $: data = $page.data as PageData;
-    const project = $page.params.project;
-    const databaseId = $page.params.database;
+    $: project = $page.params.project;
+    $: databaseId = $page.params.database;
+    $: collectionId = $page.params.collection;
 
     $: console.log(data);
 </script>
@@ -23,8 +24,9 @@
         <ul class="drop-list">
             {#each data.allCollections.collections as collection}
                 {@const href = `${base}/console/project-${project}/databases/database-${databaseId}/collection-${collection.$id}/documents`}
+                {@const isSelected = collectionId === collection.$id}
                 <li class="drop-list-item">
-                    <a class="drop-button" {href}>
+                    <a class="drop-button" class:is-selected={isSelected} {href}>
                         <span class="text">{collection.name}</span>
                     </a>
                 </li>