@roadtrip/components 2.49.1 → 2.50.0

package/dist/collection/components/global-navigation/global-navigation.stories.js

@@ -0,0 +1,358 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+export default {
+  title: 'Navigation/GlobalNavigation',
+  component: 'road-global-navigation',
+  subcomponents: {
+    'road-navbar': 'road-navbar',
+    'road-navbar-item': 'road-navbar-item',
+    'road-toolbar': 'road-toolbar',
+  },
+  parameters: {
+    actions: {
+      handles: ['roadnavbaritemclick'],
+    },
+    backgrounds: {
+      default: 'grey',
+    },
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    toolbar: {
+      control: 'text',
+    },
+    navbar: {
+      control: 'text',
+    },
+    'selected-tab': {
+      control: 'text',
+    },
+    '--z-index': {
+      table: {
+        defaultValue: { summary: '10' },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
+  args: {
+    toolbar: `
+    <road-toolbar>
+        <road-button slot="start" class="border-0 align-self-auto">
+        <road-icon name="pass-maintain-logo-solid-color"></road-icon> <road-label class="font-weight-bold h6 mb-0 ml-8">App Name</road-label>
+      </road-button>
+      
+      
+      <road-button class="border-0 align-items-center" slot="secondary">
+        <road-icon name="alert-question-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
+      </road-button>
+      <road-button class="d-none d-xl-flex align-items-center" slot="end">
+        <road-icon name="speak-advice-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
+      </road-button>
+      
+    </road-toolbar>
+    `,
+    navbar: `
+    <road-navbar>
+    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+      <road-list slot="list">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;" class="edit-profil">
+          <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Edit profile
+          </road-label>
+        </road-item>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Log out
+          </road-label>
+        </road-item>
+      </road-list>
+      <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    </road-profil-dropdown>
+
+    <road-drawer is-open="false" position="left" drawer-width="480" drawer-title="Edit profil" class="drawer-profil" has-close-icon="true">
+        <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+          <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+        </road-avatar>
+          <road-label class="mb-24">
+          <p class="h8 mb-4">First and last name</p>
+          <p class="text-medium text-truncate m-0">Email</p>
+        </road-label>
+    
+        <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+          <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+        </div>
+      </road-drawer>
+        
+        <script>
+        document.querySelector('.edit-profil').addEventListener('click', () => {
+          document.querySelector('.drawer-profil').setAttribute('is-open', 'true');
+        });
+        </script>
+
+    <road-navbar-item tab="tab-home">
+    <road-icon name="navigation-home-outline"></road-icon>
+    <road-label>Home</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-search">
+    <road-icon name="search"></road-icon>
+    <road-label>Search</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-catalog">
+    <road-icon name="print-outline"></road-icon>
+    <road-label>Print</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+    <road-icon name="alert-notification-outline"></road-icon>
+    <road-label>Notifications</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label>Catalogue</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+    <road-icon name="Diagnostic"></road-icon>
+    <road-label>Diagnostic</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
+    <road-icon name="navigation-menu"></road-icon>
+    <road-label>Menu</road-label>
+  </road-navbar-item>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
+  <road-item class="mb-16 text-left bg-light profil">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  <road-item class="bg-white border-top ">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+</road-navbar>
+
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
+  },
+};
+
+const Template = (args) => html`
+<road-global-navigation selected-tab="${ifDefined(args['selected-tab'])}">
+    ${unsafeHTML(args.toolbar)}
+    ${unsafeHTML(args.navbar)}
+</road-global-navigation>
+
+
+`;
+
+export const Playground = Template.bind({});
+
+export const Page = Template.bind({});
+Page.args = {
+  toolbar: `
+    <road-toolbar>
+      <road-button slot="start" class="border-0">
+        <road-icon name="navigation-chevron" rotate="180" size="sm"></road-icon>Back
+      </road-button>
+      
+      <road-toolbar-title>Search</road-toolbar-title>
+      <road-button class="border-0 align-items-center" slot="secondary">
+        <road-icon name="alert-question-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Help</road-label>
+      </road-button>
+      <road-button class="d-none d-xl-flex align-items-center" slot="end">
+        <road-icon name="speak-advice-outline"></road-icon><road-label class="d-none d-xl-block mx-8">Feedback</road-label>
+      </road-button>
+      
+    </road-toolbar>
+    `,
+    navbar: `
+    <road-navbar>
+    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+      <road-list slot="list">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Edit profile
+          </road-label>
+        </road-item>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Log out
+          </road-label>
+        </road-item>
+      </road-list>
+      <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    </road-profil-dropdown>
+
+    <road-navbar-item tab="tab-home">
+    <road-icon name="navigation-home-outline"></road-icon>
+    <road-label>Home</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-search">
+    <road-icon name="search"></road-icon>
+    <road-label>Search</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-catalog">
+    <road-icon name="print-outline"></road-icon>
+    <road-label>Print</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+    <road-icon name="alert-notification-outline"></road-icon>
+    <road-label>Notifications</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label>Catalogue</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+    <road-icon name="Diagnostic"></road-icon>
+    <road-label>Diagnostic</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
+    <road-icon name="navigation-menu"></road-icon>
+    <road-label>Menu</road-label>
+  </road-navbar-item>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
+  <road-item class="mb-16 text-left bg-light profil">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  <road-item class="bg-white border-top ">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+</road-navbar>
+
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
+};
+
+

package/dist/collection/components/navbar/navbar.css

@@ -12,17 +12,47 @@
 
   position: fixed;
   bottom: 0;
+  left: 0;
   z-index: var(--z-index);
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  justify-content: center;
   width: 100%;
-  height: 3.5rem;
+  height: 5.125rem;
+  padding-left: 0;
+  margin: 0;
   text-align: center;
-  contain: strict;
   -webkit-user-select: none;
           user-select: none;
   background-color: var(--road-grey-000);
   border-top: 1px solid var(--road-grey-300);
 }
+
+@media (max-width: 576px) {
+
+  :host {
+    overflow-x: auto;
+  }
+}
+
+@media (min-width: 1200px) {
+
+  :host {
+    bottom: auto;
+    flex-direction: column;
+    width: 104px;
+    height: 100%;
+    border-top: 0;
+    border-right: 1px solid var(--road-grey-300);
+  }
+}
+
+/**
+ * Button save drawer.
+ */
+
+::slotted(.drawer-button-save) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}

package/dist/collection/components/navbar/navbar.js

@@ -1,7 +1,7 @@
 import { Host, h } from '@stencil/core';
 import './../../utils/polyfill';
 /**
- * @slot  - Content of the navbar, it should be road-navbar-item elements.
+ * @slot  - Content of the navbar, it should be road-navbar-item elements. Max 5 items on Mobile
  */
 export class Navbar {
   selectedTabChanged() {

package/dist/collection/components/navbar/navbar.stories.js

@@ -34,7 +34,27 @@ export default {
     },
   },
   args: {
-    ' ': `<road-navbar-item tab="tab-home">
+    ' ': `
+    <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+      <road-list slot="list">
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Edit profile
+          </road-label>
+        </road-item>
+        <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+          <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+          <road-label style="font-size: 1rem">
+            Log out
+          </road-label>
+        </road-item>
+      </road-list>
+      <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+      <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    </road-profil-dropdown>
+
+    <road-navbar-item tab="tab-home">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -49,10 +69,91 @@ export default {
     <road-label>Print</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-menu">
+  <road-navbar-item tab="tab-notification" class="d-none d-xl-flex">
+    <road-icon name="alert-notification-outline"></road-icon>
+    <road-label>Notifications</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label>Catalogue</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-diag" class="d-none d-xl-flex">
+    <road-icon name="Diagnostic"></road-icon>
+    <road-label>Diagnostic</road-label>
+  </road-navbar-item>
+
+  <road-navbar-item tab="tab-menu" class="d-block d-xl-none tab-menu">
     <road-icon name="navigation-menu"></road-icon>
     <road-label>Menu</road-label>
-  </road-navbar-item>`,
+  </road-navbar-item>
+  
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu">
+  <road-item class="mb-16 text-left bg-light profil">
+    <road-avatar slot="start" class="mr-16">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label>
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <road-icon slot="end" name="edit-outline" size="sm" class="mr-8"></road-icon>
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="scan"></road-icon>
+    Scan
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="file-catalog"></road-icon>
+    Catalogue
+  </road-item>
+
+  <road-item class="bg-white">
+    <road-icon name="Diagnostic"></road-icon>
+    Diagnostic
+  </road-item>
+
+  <road-item class="bg-white border-top ">
+    <road-icon name="log-out"></road-icon>
+    Log out
+  </road-item>
+
+  </road-drawer>
+
+
+  <road-drawer is-open="false" position="right" drawer-width="480" drawer-title="Menu" class="d-xl-none drawer-menu2" has-back-icon="true" has-close-icon="true" back-text="back">
+    <road-avatar class="mx-auto mb-16 mt-24" size="lg">  
+      <road-img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="avatar"></road-img>
+    </road-avatar>
+      <road-label class="mb-24">
+      <p class="h8 mb-4">First and last name</p>
+      <p class="text-medium text-truncate m-0">Email</p>
+    </road-label>
+
+    <div class="p-16" style="position: absolute; bottom: 0; width: 100%">
+      <road-button color="secondary" expand="" class="mb-0">Save changes</road-button>
+    </div>
+  </road-drawer>
+  
+  <script>
+document.querySelector('.tab-menu').addEventListener('click', () => {
+  document.querySelector('.drawer-menu').setAttribute('is-open', 'true');
+});
+
+document.querySelector('.profil').addEventListener('click', () => {
+  document.querySelector('.drawer-menu2').setAttribute('is-open', 'true');
+});
+
+</script>`,
   },
 };
 
@@ -66,7 +167,27 @@ export const Playground = Template.bind({});
 
 export const Selected = Template.bind({});
 Selected.args = {
-  ' ': `<road-navbar-item tab="tab-home" selected="true">
+  ' ': `
+  <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+    <road-list slot="list">
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+        <road-label style="font-size: 1rem">
+          Edit profile
+        </road-label>
+      </road-item>
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+        <road-label style="font-size: 1rem">
+          Log out
+        </road-label>
+      </road-item>
+    </road-list>
+    <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+  </road-profil-dropdown>
+  
+  <road-navbar-item tab="tab-home" selected="true">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -81,15 +202,40 @@ Selected.args = {
     <road-label>Print</road-label>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-menu">
-    <road-icon name="navigation-menu"></road-icon>
-    <road-label>Menu</road-label>
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label>Catalogue</road-label>
+  </road-navbar-item>
+  
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
   </road-navbar-item>`,
 };
 
 export const withNotifications = Template.bind({});
 withNotifications.args = {
-  ' ': `<road-navbar-item tab="tab-home" selected="true">
+  ' ': `
+  <road-profil-dropdown is-open="false" class="m-24 d-none d-xl-block">
+    <road-list slot="list">
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="edit-outline" size="md"></road-icon>
+        <road-label style="font-size: 1rem">
+          Edit profile
+        </road-label>
+      </road-item>
+      <road-item button="" style="--border-radius: 0; --min-height: 2.5rem; --inner-padding: 0;">
+        <road-icon slot="start" name="log-out-outline" size="md"></road-icon>
+        <road-label style="font-size: 1rem">
+          Log out
+        </road-label>
+      </road-item>
+    </road-list>
+    <road-img slot="avatar" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+    <road-img slot="avatarItem" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="avatar" title="Person name"></road-img>
+  </road-profil-dropdown>
+
+  <road-navbar-item tab="tab-home" selected="true">
     <road-icon name="navigation-home-outline"></road-icon>
     <road-label>Home</road-label>
   </road-navbar-item>
@@ -105,8 +251,13 @@ withNotifications.args = {
     <road-badge>3</road-badge>
   </road-navbar-item>
 
-  <road-navbar-item tab="tab-menu">
-    <road-icon name="navigation-menu"></road-icon>
-    <road-label>Menu</road-label>
+  <road-navbar-item tab="tab-catalogue" class="d-none d-xl-flex">
+    <road-icon name="file-catalog"></road-icon>
+    <road-label>Catalogue</road-label>
+  </road-navbar-item>
+  
+  <road-navbar-item tab="tab-scan" class="d-none d-xl-flex">
+    <road-icon name="scan"></road-icon>
+    <road-label>Scan</road-label>
   </road-navbar-item>`,
 };