Merge pull request #338 from marcellamaki/update-toolbar-layout

Allow for new 'nav' slot inline in the toolbar

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 Releases are recorded as git tags in the [Github releases](https://github.com/learningequality/kolibri-design-system/releases) page.
 
+## Version 1.4.x
+- [#185] - Handle arrow key navigation and improve focusOutline
+- [#338] - Allow for new 'nav' slot inline in the toolbar
+
+
 ## Version 1.3.1
 
 - [#309] - Add jest testing environment to KDS

lib/keen/UiToolbar.vue

@@ -23,16 +23,16 @@
           </div>
         </slot>
       </div>
-    </div>
-
-    <div class="ui-toolbar__body" :class="{ 'has-brand-divider': hasBrandDivider }">
       <slot>
         <div v-if="title" class="ui-toolbar__title">
           {{ title }}
         </div>
       </slot>
+      <slot name="navigation" class="ui-toolbar__nav"></slot>
     </div>
 
+
+
     <div class="ui-toolbar__right">
       <slot name="actions"></slot>
     </div>
@@ -134,9 +134,12 @@
   .ui-toolbar {
     position: relative;
     display: flex;
+    align-content: center;
     align-items: center;
+    justify-content: space-between;
     height: $ui-toolbar-height;
     padding-left: rem(16px);
+    max-width: 100%;
     font-family: inherit;
     font-size: $ui-toolbar-font-size;
 
@@ -155,16 +158,22 @@
   }
 
   .ui-toolbar__left {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
+    display: inline-flex;
   }
 
   .ui-toolbar__nav-icon {
     margin-right: rem(8px);
     margin-left: rem(-16px);
   }
 
+  .ui-toolbar__nav {
+    margin-right: rem(8px);
+    margin-left: rem(-16px);
+    display: flex;
+    align-items: bottom;
+    margin-left: 16px;
+  }
+
   .ui-toolbar__brand {
     min-width: rem(160px);
   }
@@ -175,8 +184,6 @@
   }
 
   .ui-toolbar__body {
-    display: flex;
-    flex-grow: 1;
 
     &.has-brand-divider {
       padding-left: rem(24px);
@@ -186,8 +193,7 @@
   }
 
   .ui-toolbar__right {
-    flex-shrink: 0;
-    margin-left: auto;
+    display: inline-block;
   }
 
   .ui-toolbar__progress {