make toolbar items flex (#66)

Author: eksrha

projects/lib-workspace/src/app/app.component.html

@@ -14,26 +14,25 @@
       </button>
     </fs-nav-frame-toolbar-center>
 
-    <fs-nav-frame-toolbar-end>
-      <div style="font-size: 12px">
-        <mat-form-field appearance="outline" dense>
-          <mat-label>Search</mat-label>
-          <input matInput placeholder="Searching..." />
-        </mat-form-field>
-      </div>
+    <fs-nav-frame-toolbar-end style="gap: 1rem">
+      <mat-form-field appearance="outline" class="dense-search">
+        <mat-label>Search</mat-label>
+        <input matInput placeholder="Searching..." />
+      </mat-form-field>
+      <button mat-icon-button>
+        <mat-icon>notifications</mat-icon>
+      </button>
     </fs-nav-frame-toolbar-end>
   </fs-nav-frame-toolbar>
 
   <fs-nav-frame-sidebar>
-
-    <fs-nav-frame-sidebar-item *ngFor="let route of navRoutes" routerLink="{{route.path}}">
-      <i class="material-icons">{{route.icon}}</i>
-      <span>{{route.title}}</span>
+    <fs-nav-frame-sidebar-item *ngFor="let route of navRoutes" routerLink="{{ route.path }}">
+      <i class="material-icons">{{ route.icon }}</i>
+      <span>{{ route.title }}</span>
     </fs-nav-frame-sidebar-item>
-
   </fs-nav-frame-sidebar>
 
-  <fs-nav-user-profile >
+  <fs-nav-user-profile>
     <!--  profilePicture="https://material.angular.io/assets/img/examples/shiba1.jpg" -->
     <fs-nav-user-profile-name>Some User</fs-nav-user-profile-name>
     <fs-nav-user-profile-subname>Enginer</fs-nav-user-profile-subname>

projects/lib-workspace/src/styles.scss

@@ -10,22 +10,32 @@
 @include fsc.core();
 @include fsc.roboto();
 
-$my-typography: mat.define-typography-config($font-family: 'Roboto-local');
+$my-typography: mat.define-typography-config(
+  $font-family: 'Roboto-local',
+);
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme((color: (primary: mat.define-palette(palettes.$md-primary),
-        accent: mat.define-palette(palettes.$md-accent),
-      ),
-      // Only include `typography` and `density` in the default dark theme.
-      typography: $my-typography,
-      density: 0,
-    ));
+$dark-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: mat.define-palette(palettes.$md-primary),
+      accent: mat.define-palette(palettes.$md-accent),
+    ),
+    // Only include `typography` and `density` in the default dark theme.
+    typography: $my-typography,
+    density: 0,
+  )
+);
 
 // Define a light theme
-$light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palettes.$md-primary),
-        accent: mat.define-palette(palettes.$md-accent),
-      ),
-    ));
+$light-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: mat.define-palette(palettes.$md-primary),
+      accent: mat.define-palette(palettes.$md-accent),
+    ),
+  )
+);
 
 // Apply the dark theme by default
 @include mat.all-component-themes($dark-theme);
@@ -41,4 +51,12 @@ $light-theme: mat.define-light-theme((color: (primary: mat.define-palette(palett
 
 html * {
   font-family: 'Roboto-local';
-}
+}
+
+.dense-search {
+  @include mat.form-field-density(-5);
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+}

projects/ng-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.scss

@@ -20,6 +20,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  fs-nav-frame-toolbar-start,
+  fs-nav-frame-toolbar-center,
+  fs-nav-frame-toolbar-end {
+    display: inline-flex;
+    align-items: center;
+  }
 }
 
 .mat-badge-medium.mat-badge-above .mat-badge-content {
@@ -32,4 +39,4 @@
 
 button.mat-badge {
   margin: 0 4px;
-}
+}