feat: show recent charts in navbar

src/utils/header-links.js

@@ -75,9 +75,13 @@ module.exports = {
                     svgIcon: 'cabinet',
                     title: __('Archive'),
                     url: '/mycharts',
+                    order: 60
+                },
+                {
+                    id: 'my-charts',
                     type: 'visArchive',
                     submenuItems: true,
-                    order: 60
+                    order: 61
                 },
                 {
                     type: 'separator',

src/views/layout/partials/PageHeader.svelte

@@ -68,7 +68,7 @@
         background: white;
         border-bottom: 1px solid #eee;
         border-top: 3px solid var(--color-dw-blue-medium);
-        transition: all 0.2s ease-in-out;
+        transition: padding 0.2s ease-in-out, margin 0.2s ease-in-out;
     }
 
     header.is-sticky {
@@ -89,5 +89,6 @@
 
     .navbar-compact .navbar-item {
         padding: 0.15rem 1rem !important;
+        transition: padding 0.2s ease-in-out;
     }
 </style>

src/views/layout/partials/header/NavBar.svelte

@@ -18,7 +18,14 @@
                     <span aria-hidden="true" />
                 </div>
             {:else if link.submenuItems}
-                <div class="navbar-item has-dropdown is-hoverable">
+                <!-- top level navbar entry with submenu -->
+                <div
+                    class="navbar-item has-dropdown is-hoverable"
+                    class:just-arrow={link.type === 'visArchive' &&
+                        !link.title &&
+                        !link.icon &&
+                        !link.svgIcon}
+                >
                     <a
                         href={link.url || '#/dropdown'}
                         class="navbar-link"
@@ -28,13 +35,16 @@
                                 crisp={!!link.svgIconCrisp}
                                 valign="top"
                                 icon={link.svgIcon}
+                                className={link.title ? '' : 'mr-0'}
                             />{/if}{#if link.fontIcon}<span class="icon"
                                 ><i class={link.fontIcon} /></span
                             >{/if} <span>{@html link.title || ''}</span></a
                     >
                     {#if link.type === 'visArchive'}
+                        <!-- visualization archive is a special component -->
                         <VisArchive />
                     {:else}
+                        <!-- navbar dropdown menu -->
                         <div class="navbar-dropdown is-right">
                             {#each link.submenuItems as subItem}
                                 {#if subItem.type === 'separator'}
@@ -77,6 +87,7 @@
                     {/if}
                 </div>
             {:else}
+                <!-- top-level navbar link/icon -->
                 <a
                     class:is-active={link.url === '/'
                         ? $request.path === '/'
@@ -97,12 +108,43 @@
     </div>
 </div>
 
-<style>
+<style lang="less">
     :global(.navbar-dropdown) {
         border-radius: var(--box-border-radius);
         border: 1px solid var(--color-dw-gray);
         box-shadow: 0px 4px 4px 0px #00000040;
     }
+
+    div.navbar-item,
+    a.navbar-item {
+        transition: none !important;
+    }
+
+    div.navbar-item {
+        &:hover {
+            background: var(--color-dw-gray-90) !important;
+            border-radius: var(--box-border-radius);
+
+            a.navbar-link:hover {
+                background: none !important;
+            }
+        }
+
+        &.just-arrow {
+            padding: 0 !important;
+            margin: 0 !important;
+            // margin-left: -1.5em!important;
+
+            .navbar-link:after {
+                right: 1.4em;
+            }
+        }
+    }
+
+    a.navbar-item:hover {
+        background: var(--color-dw-gray-90) !important;
+        border-radius: var(--box-border-radius);
+    }
     .navbar-item.is-active {
         background: var(--color-dw-blue-light) !important;
         border-radius: var(--box-border-radius);
@@ -143,6 +185,7 @@
     }
 
     :global(.navbar-compact) .navbar-separator span {
+        transition: height, margin 0.2 ease-in-out;
         margin-top: 0.23rem;
         margin-bottom: 0.23rem;
         height: 2.2rem;

src/views/layout/partials/header/VisArchive.svelte

@@ -1,12 +1,15 @@
 <script>
     import { onMount } from 'svelte';
     import SvgIcon from '../SvgIcon.svelte';
-    import VisArchiveRow from './VisArchiveRow.svelte';
+    import httpReq from '@datawrapper/shared/httpReq';
+    import purifyHTML from '@datawrapper/shared/purifyHtml';
 
     let items = [];
 
-    onMount(() => {
+    onMount(async () => {
         // load recently edited visualizations
+        const { list: charts } = await httpReq.get('/v3/charts?orderBy=lastModifiedAt&limit=10');
+        items = charts;
     });
 </script>
 
@@ -26,7 +29,10 @@
         </div>
     {:else}
         {#each items as item}
-            <VisArchiveRow bind:item />
+            <a class="navbar-item" href="/chart/{item.id}/edit">
+                <img src={item.thumbnails.plain} alt="" class="mr-2" />
+                {purifyHTML(item.title, '')}
+            </a>
         {/each}
     {/if}
 </div>
@@ -35,4 +41,15 @@
     .navbar-dropdown {
         width: 260px;
     }
+
+    img {
+        vertical-align: middle;
+    }
+    .navbar-item {
+        display: inline-block;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 </style>