fix(gv-menu): resolve sticky mode

fix gravitee-io/issues#5233
gravitee-io · Mar 16, 2021 · 0422353 · 0422353
1 parent a25cc0d
commit 0422353
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/src/organisms/gv-menu.js b/src/organisms/gv-menu.js
@@ -73,7 +73,7 @@ export class GvMenu extends withResizeObserver(LitElement) {
         }
 
         :host([sticky]) gv-nav {
-          line-height: 1px;
+          line-height: 14px;
           --gv-link-icon--s: 20px;
         }
 
@@ -82,7 +82,6 @@ export class GvMenu extends withResizeObserver(LitElement) {
         }
 
         :host([sticky]) ::slotted([slot='top']) {
-          height: 35px;
           transition: height 250ms ease-in-out;
         }
 

diff --git a/stories/organisms/gv-menu.stories.js b/stories/organisms/gv-menu.stories.js
@@ -38,9 +38,10 @@ const routes = [
   { path: '#', title: 'Starred', icon: 'home:flower#1' },
   { path: '#', title: 'Trendings', icon: 'appliances:fan' },
 ];
-const items = [{ routes }];
 
-export const Basics = makeStory(conf, { items });
+export const Basics = makeStory(conf, { items: [{ routes }] });
+
+export const Sticky = makeStory(conf, { items: [{ routes, sticky: true }] });
 
 export const Empty = makeStory(conf, { items: [{}] });
 
@@ -81,6 +82,35 @@ export const TopSlot = makeStory(conf, {
   ],
 });
 
+export const TopSlotSticky = makeStory(conf, {
+  items: [
+    {
+      routes: routes,
+      innerHTML: '<gv-header slot="top" can-subscribe></gv-header>',
+      sticky: true,
+    },
+  ],
+  simulations: [
+    storyWait(0, ([component]) => {
+      component.firstElementChild.item = {
+        name: 'Long Supernova',
+        picture: horizontalImage,
+        version: 'v.1.1',
+        states: [
+          { value: 'beta', minor: true },
+          { value: 'running', major: true },
+        ],
+      };
+
+      component.firstElementChild.breadcrumbs = [
+        { path: '#', title: 'Catalog' },
+        { path: '#', title: 'Categories' },
+        { path: '#', title: 'My API' },
+      ];
+    }),
+  ],
+});
+
 export const RightTransitionSlot = makeStory(conf, {
   items: [
     {