@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/layout/assets/logo_nl.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88.471" height="80" viewBox="0 0 88.471 80">
+  <path id="Logo_red_NL" d="M6166.018,4806.98a3.866,3.866,0,0,1-3.62,2.071,4.485,4.485,0,0,1-2.2-.479v-9.623h1.69v3.354a4.535,4.535,0,0,1,1.3-.2,3.057,3.057,0,0,1,2.93,1.83,2.861,2.861,0,0,1,2.7-1.83c1.8,0,2.989,1.365,2.989,3.438v.478h-4.3a1.763,1.763,0,0,0,1.873,1.677,3.484,3.484,0,0,0,1.733-.465l.409,1.085a4.274,4.274,0,0,1-2.424.732A3.035,3.035,0,0,1,6166.018,4806.98Zm-4.127-3.255v3.818a2.43,2.43,0,0,0,.829.127,2.042,2.042,0,0,0,1.96-2.2,1.843,1.843,0,0,0-1.845-1.959A2.314,2.314,0,0,0,6161.891,4803.725Zm5.579,1.1h2.593a1.357,1.357,0,0,0-1.282-1.465A1.378,1.378,0,0,0,6167.47,4804.825Zm-12.272,4.143-1.592-4.468h-5.3l-1.551,4.468h-1.985l5.073-14.2h2.324l5.086,14.2Zm-5.029-10-1.452,4.1-.014.015h4.5l-1.48-4.086c-.308-.93-.521-1.774-.745-2.591h-.071C6150.7,4797.217,6150.451,4798.1,6150.168,4798.964Zm-10.89,9.989h-.016l-4.889-14.2h2.114l2.326,6.988c.618,1.916,1.168,3.662,1.592,5.311h.042a53.114,53.114,0,0,1,1.7-5.282l2.522-7.017h2.057l-5.34,14.2Zm-7.314,0a16.785,16.785,0,0,1-.973-3.4c-.437-1.959-1.253-2.7-3-2.761h-1.816v6.156h-1.931v-13.991a21.936,21.936,0,0,1,3.691-.311c2.057,0,3.411.382,4.341,1.186a3.483,3.483,0,0,1,1.168,2.69,3.768,3.768,0,0,1-2.8,3.605v.057a3.659,3.659,0,0,1,2.184,2.861,23.2,23.2,0,0,0,1.127,3.9Zm-5.791-12.694v5.155h1.972c2.044,0,3.354-1.069,3.354-2.69,0-1.832-1.4-2.635-3.424-2.635A8.389,8.389,0,0,0,6126.173,4796.258Zm31.955,11.777a.911.911,0,0,1,.889-.929.893.893,0,0,1,.887.929.871.871,0,0,1-.887.9A.889.889,0,0,1,6158.128,4808.036Zm13.684-2.014v.015Zm1.492-3.226c7.215-3.775,13.978-10.85,13.978-24.024,0-26.628-26.843-28.375-30.759-28.489h-.479a7.131,7.131,0,0,0,0,14.26h.113c1.493.026,15.457.7,15.457,14.215s-14.188,14.132-15.485,14.16h-33.6a36.694,36.694,0,0,1-9.624-24.545c0-20.936,18.346-38.07,41.5-39.322h.014v.224c-7.115.634-29.024,4.27-29.04,27.983,0,26.629,26.841,28.376,30.759,28.489h.479a7.116,7.116,0,0,0,0-14.231h-.111c-1.494-.029-15.458-.649-15.458-14.217,0-13.513,14.172-14.133,15.485-14.16h34.6a36.761,36.761,0,0,1,10.244,25.205c0,16.612-11.737,28.688-28.067,34.492Z" transform="translate(-6112.901 -4729.051)" fill="#eb142a"/>
+</svg>

package/projects/onemrva/design-system/layout/assets/logo_onem_rva.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 67.99 58.26">
+    <defs>
+        <style>.cls-1 {
+            fill: #e63238;
+        }</style>
+    </defs>
+    <g id="Calque_2" data-name="Calque 2">
+        <g id="Layer_1" data-name="Layer 1">
+            <path class="cls-1" d="M58.91,10.14a.65.65,0,1,1,.63-.64A.63.63,0,0,1,58.91,10.14Z"/>
+            <path class="cls-1"
+                  d="M68,8.07h-3a1.25,1.25,0,0,0,1.33,1.19,2.47,2.47,0,0,0,1.23-.33l.29.77a3,3,0,0,1-1.72.52,2.15,2.15,0,0,1-2.19-1.48,2.73,2.73,0,0,1-2.56,1.48,3.21,3.21,0,0,1-1.57-.34V3H61V5.42a3.23,3.23,0,0,1,.92-.14A2.17,2.17,0,0,1,64,6.58a2,2,0,0,1,1.92-1.3A2.16,2.16,0,0,1,68,7.72ZM61.62,6.29a1.62,1.62,0,0,0-.67.15V9.15a1.74,1.74,0,0,0,.59.09,1.45,1.45,0,0,0,1.39-1.56A1.31,1.31,0,0,0,61.62,6.29Zm4.22-.11a1,1,0,0,0-.93,1h1.84A1,1,0,0,0,65.84,6.18Z"/>
+            <path class="cls-1"
+                  d="M35.6,1.14A6.08,6.08,0,0,1,37,1c1.45,0,2.44.56,2.44,1.86S38.46,4.8,37,4.8H35.6Zm-1.36,9H35.6V5.79h1.29c1.24,0,1.82.56,2.14,2a11.09,11.09,0,0,0,.69,2.41h1.41a16.33,16.33,0,0,1-.8-2.77,2.59,2.59,0,0,0-1.56-2v0a2.69,2.69,0,0,0,2-2.56A2.48,2.48,0,0,0,39.94.84,4.52,4.52,0,0,0,36.86,0a15.36,15.36,0,0,0-2.62.22Z"/>
+            <path class="cls-1"
+                  d="M44.89,10.15,41.42.07h1.5l1.64,5c.44,1.36.83,2.6,1.13,3.77h0c.3-1.17.73-2.44,1.21-3.76l1.79-5h1.46L46.4,10.15Z"/>
+            <path class="cls-1"
+                  d="M51.6,6l1-2.91c.21-.61.38-1.24.52-1.82h.05c.15.58.31,1.18.53,1.83L54.79,6Zm3.47,1,1.13,3.17h1.46L54.05.07H52.4L48.8,10.15h1.42L51.32,7Z"/>
+            <path class="cls-1"
+                  d="M32.58,1.38C16.15,2.28,3.14,14.44,3.14,29.3A26,26,0,0,0,10,46.72H33.81c.93,0,11-.46,11-10s-9.92-10.07-11-10.09h-.09a5.06,5.06,0,0,1,0-10.11h.34c2.78.08,21.82,1.32,21.82,20.23,0,9.35-4.79,14.36-9.91,17v0C57.59,49.66,65.92,41.09,65.92,29.3a26.12,26.12,0,0,0-7.26-17.89H34.09c-.93,0-11,.46-11,10.05s9.91,10.07,11,10.09h.09a5.06,5.06,0,0,1,0,10.11h0a.21.21,0,0,1-.08,0h-.26C31,41.58,12,40.34,12,21.44,12,4.58,27.54,2,32.6,1.55Z"/>
+            <path class="cls-1"
+                  d="M33.93,53.65c-.08-1.41-.17-3.12-.17-4.37h0c-.37,1.17-.77,2.45-1.28,3.84L30.67,58h-1L28,53.22c-.48-1.45-.88-2.74-1.16-3.94h0c0,1.26-.11,2.94-.2,4.47l-.27,4.35H25.13L25.83,48H27.5l1.73,4.9c.42,1.25.75,2.36,1,3.41h0c.27-1,.63-2.13,1.08-3.41l1.8-4.9h1.67l.63,10.13H34.17Z"/>
+            <path class="cls-1"
+                  d="M4.6,57.2c-2.06,0-3.23-2-3.23-4.1s1.08-4.23,3.26-4.23S7.86,51,7.86,53c0,2.3-1.18,4.21-3.25,4.21Zm0,1.06c2.57,0,4.68-1.86,4.68-5.33,0-3-1.78-5.12-4.56-5.12S0,49.91,0,53.12s1.86,5.14,4.55,5.14Z"/>
+            <path class="cls-1"
+                  d="M10,58.1V48h1.44l3.23,5.13a25.48,25.48,0,0,1,1.8,3.28h0c-.12-1.35-.15-2.58-.15-4.15V48h1.23V58.1H16.32L13.1,53a31.14,31.14,0,0,1-1.88-3.38h0c.07,1.28.09,2.5.09,4.18V58.1Z"/>
+            <path class="cls-1" d="M23.88,53.35H20V57h4.38v1.1h-5.7V48h5.48v1.1H20v3.2h3.92Z"/>
+            <path class="cls-1" d="M36.63,58.09a.65.65,0,1,1,.63-.65A.63.63,0,0,1,36.63,58.09Z"/>
+            <path class="cls-1"
+                  d="M45.71,56H42.66A1.25,1.25,0,0,0,44,57.2a2.4,2.4,0,0,0,1.22-.33l.29.77a3,3,0,0,1-1.71.52,2.15,2.15,0,0,1-2.19-1.47A2.75,2.75,0,0,1,39,58.16a3.19,3.19,0,0,1-1.56-.34V51h1.2v2.38a3.22,3.22,0,0,1,.92-.15,2.18,2.18,0,0,1,2.08,1.31,2,2,0,0,1,1.92-1.31,2.16,2.16,0,0,1,2.12,2.44Zm-6.37-1.78a1.62,1.62,0,0,0-.67.15v2.71a1.74,1.74,0,0,0,.59.09,1.45,1.45,0,0,0,1.39-1.56A1.31,1.31,0,0,0,39.34,54.23Zm4.22-.11a1,1,0,0,0-.93,1h1.84A1,1,0,0,0,43.56,54.12Z"/>
+        </g>
+    </g>
+</svg>

package/projects/onemrva/design-system/layout/index.ts

@@ -0,0 +1,7 @@
+export * from './src/components';
+export * from './src/directives/drawer-host.directive';
+export * from './src/enums/environment.enum';
+export * from './src/models/onem-language.model';
+export * from './src/models/onemrva-profile.model';
+export * from './src/services/drawer.service';
+export * from './src/layout.module';

package/projects/onemrva/design-system/layout/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

package/projects/onemrva/design-system/layout/src/components/index.ts

@@ -0,0 +1,31 @@
+import { LayoutComponent } from './layout/layout.component';
+import { LayoutContentComponent } from './layout-content/layout-content.component';
+import { LayoutFooterComponent } from './layout-footer/layout-footer.component';
+import { LayoutRouteComponent } from './layout-route/layout-route.component';
+import { LayoutTitleComponent } from './layout-title/layout-title.component';
+import { LayoutSidenavTitleComponent } from './layout-sidenav-title/layout-sidenav-title.component';
+import { LayoutSidenavComponent } from './layout-sidenav/layout-sidenav.component';
+import { LayoutLoginMenuComponent } from './layout-login-menu/layout-login-menu.component';
+import { LayoutSubrouteComponent } from './layout-subroute/layout-subroute.component';
+
+export const components: any[] = [
+  LayoutComponent,
+  LayoutContentComponent,
+  LayoutFooterComponent,
+  LayoutRouteComponent,
+  LayoutSubrouteComponent,
+  LayoutTitleComponent,
+  LayoutSidenavTitleComponent,
+  LayoutSidenavComponent,
+  LayoutLoginMenuComponent,
+];
+
+export * from './layout/layout.component';
+export * from './layout-content/layout-content.component';
+export * from './layout-footer/layout-footer.component';
+export * from './layout-route/layout-route.component';
+export * from './layout-subroute/layout-subroute.component';
+export * from './layout-title/layout-title.component';
+export * from './layout-sidenav-title/layout-sidenav-title.component';
+export * from './layout-login-menu/layout-login-menu.component';
+export * from './layout-sidenav/layout-sidenav.component';

package/projects/onemrva/design-system/layout/src/components/layout/_layout-mixin.component.scss

@@ -0,0 +1,159 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+@mixin layout($theme) {
+  $accent: mat.get-color-from-palette(map-get($theme, "accent"));
+  $grey300: mat.get-color-from-palette(map-get($theme, "grayscale"), 300);
+  $grey900: mat.get-color-from-palette(map-get($theme, "grayscale"), 900);
+  $spacer: map-get($theme, "spacer");
+  $typography: map.get($theme, typography);
+
+  .mobile-menu-sidebar {
+    min-width: 250px;
+    .mobile-menu-item {
+      display: flex;
+      width: 100%;
+      background: #ffffff;
+      padding: 16px;
+      border: none;
+      box-shadow: none;
+      font-size: 16px;
+      align-items: center;
+      text-align: left;
+      &:active,
+      &.active {
+        border-right: 4px solid $accent;
+        font-weight: bold !important;
+      }
+      mat-icon {
+        margin-left: 4px;
+      }
+    }
+  }
+  mat-drawer {
+    background: #ffffff !important;
+  }
+
+  mat-toolbar {
+    padding: 0 $spacer * 7;
+  }
+
+  .application-title {
+    color: $accent;
+    height: $spacer * 6;
+    margin: $spacer * 2.75 0;
+  }
+
+  .logo {
+    height: 42px;
+  }
+
+  .language-tabs {
+    align-self: center;
+    .mat-tab-labels {
+      gap: $spacer * 3;
+    }
+
+    .mat-mdc-tab-header {
+      margin-bottom: 0;
+
+      .mat-mdc-tab-labels {
+        gap: 24px;
+
+        .mdc-tab {
+          min-width: 24px;
+          padding: 0;
+          gap: 0;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .nav-container {
+    gap: $spacer * 3;
+    padding: 0;
+
+    nav {
+      gap: $spacer * 6;
+    }
+
+    .mat-mdc-menu-trigger {
+      align-self: center;
+    }
+
+    .account-button {
+      padding: 0;
+      mat-icon {
+        font-size: 32px;
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+
+  .s-menu {
+    padding: $spacer $spacer * 3 0;
+    .s-menu-languages {
+      gap: $spacer * 3;
+    }
+    .s-menu-item {
+      margin-bottom: $spacer;
+      @include mat.typography-level($typography, "body-2");
+
+      &:hover {
+        font-weight: 900;
+      }
+    }
+  }
+
+  //
+  // TAB LINK
+  //
+  .mat-mdc-tab-nav-bar {
+    &.onemrva-tab-links {
+      align-self: center;
+    }
+
+    .mat-mdc-tab-links {
+      gap: 6 * $spacer;
+
+      .mat-mdc-tab-link {
+        //font-weight: 700;
+        min-width: 24px;
+        padding: 0;
+        font-weight: 400;
+        align-items: center;
+        text-transform: uppercase;
+        color: $grey900;
+        font-family: Poppins, sans-serif;
+        font-size: 14px;
+
+        &.mdc-tab--active {
+          .mdc-tab__text-label {
+            text-shadow: 0px 0px 1px $grey900; // THC HACK
+            //font-weight: 700; // for some cosmic reason, this breaks the tab animation (but not with languages)
+            color: $grey900;
+          }
+        }
+      }
+    }
+  }
+
+  .mdc-tab-indicator__content--underline {
+    border: 2px solid $accent !important;
+  }
+
+  onemrva-layout {
+    .onemrva-footer {
+      color: $grey900;
+      border-top: 1px solid $grey300;
+      @include mat.typography-level($typography, "label-smallbutton");
+      font-family: mat.font-family($typography, "label-smallbutton");
+    }
+  }
+
+  .language-tabs .mat-mdc-tab-label-container {
+    padding: 0 12px;
+  }
+}

package/projects/onemrva/design-system/layout/src/components/layout/layout.component.html

@@ -0,0 +1,194 @@
+<mat-drawer-container
+  class="example-container"
+  [hasBackdrop]="drawerService.hasBackdrop"
+  autosize
+>
+  <div class="app-content">
+    <ng-container
+      *ngIf="
+        environment && (environment === env.LOCAL || environment === env.TEST)
+      "
+    >
+      <div class="environment" [class]="environment">
+        {{ environment }}
+      </div>
+
+      <button
+        id="accessibility_fab"
+        mat-fab
+        color="accent"
+        aria-label="Accessibility check"
+        matTooltip="Accessibility check"
+        onclick="javascript:(function() {var _p='//openfed.github.io/AccessibilityCheck/build/';var _i=function(s,cb) {var sc=document.createElement('script');sc.onload = function() {sc.onload = null;sc.onreadystatechange = null;cb.call(this);};sc.onreadystatechange = function(){if(/^(complete|loaded)$/.test(this.readyState) === true){sc.onreadystatechange = null;sc.onload();}};sc.src=s;if (document.head) {document.head.appendChild(sc);} else {document.getElementsByTagName('head')[0].appendChild(sc);}}; var options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();"
+      >
+        <mat-icon>accessibility</mat-icon>
+      </button>
+    </ng-container>
+    <mat-toolbar class="mat-elevation-z4">
+      <div
+        [class.container]="!fluid"
+        [class.container-fluid]="fluid"
+        class="nav-container"
+        style="display: flex; align-items: center"
+      >
+        {{ logoRedictionUrl }}
+        <img
+          class="logo"
+          [src]="logo"
+          [attr.data-cy]="'onemrva_logo_' + translateService.currentLang"
+          alt="Logo ONEM/RVA"
+          [routerLink]="
+            logoRedictionUrl !== null ? logoRedictionUrl : undefined
+          "
+          [ngStyle]="{
+            cursor: logoRedictionUrl !== null ? 'pointer' : 'default'
+          }"
+        />
+        <div class="application-title" [ngClass]="{ 'small-screen': isSmall }">
+          <ng-container *ngIf="title?.template as titleTpl">
+            <ng-container *ngTemplateOutlet="titleTpl"></ng-container>
+          </ng-container>
+        </div>
+
+        <div style="flex: 1"></div>
+        <nav
+          mat-tab-nav-bar
+          style="display: flex; align-items: center"
+          [tabPanel]="tabPanel"
+          *ngIf="!isSmall"
+        >
+          <ng-container *ngFor="let e of routes?.toArray(); let i = index">
+            <a
+              mat-tab-link
+              [routerLink]="e.routerLink"
+              [routerLinkActiveOptions]="{ exact: !e.hasSubroutes() }"
+              #rla="routerLinkActive"
+              routerLinkActive="mdc-tab--active"
+              [active]="rla.isActive || e.isRouteActive()"
+            >
+              <ng-container *ngIf="e.template as routeTemplate">
+                <ng-container *ngTemplateOutlet="routeTemplate"> </ng-container>
+              </ng-container>
+            </a>
+          </ng-container>
+        </nav>
+        <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
+
+        <mat-divider
+          vertical
+          style="height: 1em; align-self: center"
+          *ngIf="!isSmall && routes?.toArray()?.length"
+        ></mat-divider>
+
+        <mat-tab-group
+          class="language-tabs"
+          [selectedIndex]="selectedIndex"
+          (selectedIndexChange)="changeLanguage($event)"
+          *ngIf="!isSmall"
+        >
+          <mat-tab *ngFor="let lang of languages">
+            <div *matTabLabel [attr.data-cy]="'language_' + lang.code">
+              {{ lang.label }}
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+
+        <ng-container *ngIf="profile !== null">
+          <mat-divider
+            vertical
+            style="height: 1em; align-self: center"
+            *ngIf="!isSmall"
+          ></mat-divider>
+          <button
+            disableRipple
+            data-cy="accountMenu"
+            class="account-button"
+            [matMenuTriggerFor]="menu"
+            mat-icon-button
+            attr.aria-label="{{ 'layout.profile' | translate }}"
+          >
+            <mat-icon *ngIf="!profile.isLoggedIn" class="large"
+              >account_circle</mat-icon
+            >
+
+            <onemrva-mat-avatar
+              *ngIf="profile.isLoggedIn"
+              initials="{{ profile.initials() }}"
+              color="accent"
+              size="extrasmall"
+            ></onemrva-mat-avatar>
+          </button>
+          <mat-menu #menu="matMenu">
+            <ng-container *ngIf="profile.isLoggedIn; else notConnected">
+              <p class="accountName">
+                {{ profile.firstName }} {{ profile.lastName }}
+              </p>
+              <mat-divider style="align-self: stretch"></mat-divider>
+
+              <ng-container *ngIf="loginMenu?.template as menuLoginTpl">
+                <ng-container *ngTemplateOutlet="menuLoginTpl"></ng-container>
+              </ng-container>
+
+              <button
+                type="button"
+                class="mat-mdc-menu-item"
+                mat-menu-itemMrzapoie
+                data-cy="logoutButton"
+                (click)="doLogout()"
+                attr.aria-label="{{ 'layout.logout' | translate }}"
+              >
+                <mat-icon>logout</mat-icon>{{ "layout.logout" | translate }}
+              </button>
+            </ng-container>
+            <ng-template #notConnected>
+              <button
+                type="button"
+                mat-menu-item
+                data-cy="loginButton"
+                (click)="doLogin()"
+                attr.aria-label="{{ 'layout.login' | translate }}"
+              >
+                <mat-icon>login</mat-icon>{{ "layout.login" | translate }}
+              </button>
+            </ng-template>
+          </mat-menu>
+        </ng-container>
+        <ng-container
+          *ngIf="
+            isSmall &&
+            (routes?.toArray()?.length || (languages && languages.length > 1))
+          "
+        >
+          <button
+            type="button"
+            mat-icon-button
+            class="menu-button"
+            data-cy="smallDeviceMenu"
+            (click)="toggleSideNav()"
+            attr.aria-label="{{ 'layout.menu' | translate }}"
+          >
+            <mat-icon>menu</mat-icon>
+          </button>
+        </ng-container>
+      </div>
+    </mat-toolbar>
+
+    <ng-container>
+      <div [id]="id" [attr.role]="role" class="onemrva-layout-content" *ngIf="content?.template as tpl">
+        <ng-container *ngTemplateOutlet="tpl"></ng-container>
+      </div>
+
+      <footer class="onemrva-footer" *ngIf="footer?.template as footer">
+        <ng-container *ngTemplateOutlet="footer"></ng-container>
+      </footer>
+    </ng-container>
+  </div>
+
+  <mat-drawer
+    class="onemrva-drawer mobile-menu-sidebar"
+    mode="over"
+    position="end"
+  >
+    <ng-template drawerhost></ng-template>
+  </mat-drawer>
+</mat-drawer-container>

package/projects/onemrva/design-system/layout/src/components/layout/layout.component.scss

@@ -0,0 +1,137 @@
+@use "sass:map";
+
+$navbar-height: 90px;
+
+.mat-mdc-tab-nav-bar {
+  .mat-mdc-tab-header {
+    height: 42px !important;
+  }
+}
+
+.logo {
+  align-self: center;
+  cursor: pointer;
+}
+
+.application-title {
+  font-size: 1rem;
+  font-weight: 700;
+  font-size: 20px;
+  height: 42px;
+}
+
+:host .mat-toolbar {
+  background: white;
+  position: fixed;
+  top: 0;
+  height: $navbar-height;
+
+  z-index: 400;
+}
+
+.accountName {
+  margin: 16px;
+  line-height: 16px;
+  font-weight: bold;
+}
+
+:host {
+  position: relative;
+
+  router-outlet {
+    display: block;
+    margin-bottom: 90px;
+  }
+
+  .environment {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 24000;
+    width: 60px;
+    height: 50px;
+    padding: 15px 20px;
+
+    border-radius: 0 0 100% 0;
+    color: white;
+    display: none;
+
+    &.LOCAL {
+      background-color: hsla(0, 100%, 50%, 0.5);
+      display: block;
+    }
+    &.TEST {
+      background-color: hsla(220, 60%, 50%, 0.5);
+      display: block;
+    }
+    &.VAL {
+      background-color: hsla(140, 100%, 30%, 0.5);
+      display: block;
+    }
+  }
+
+  a {
+    &:active {
+      outline: none;
+    }
+  }
+}
+
+.s-menu {
+  .s-menu-languages {
+    display: flex;
+  }
+  .s-menu-item {
+    &.active {
+      font-weight: bold !important;
+    }
+    &:hover {
+      cursor: pointer;
+      font-weight: 700;
+    }
+  }
+}
+
+onemrva-layout {
+  .onemrva-layout-content {
+    padding-top: $navbar-height;
+    min-height: calc(100vh - #{$navbar-height});
+  }
+
+  .onemrva-footer {
+    text-align: center;
+    padding: 9.5px;
+  }
+}
+
+onemrva-mat-avatar.clickable {
+  cursor: pointer;
+}
+
+.mat-mdc-menu-content {
+  button {
+    &.active > * {
+      font-weight: bold !important;
+    }
+    mat-icon {
+      font-size: 18px !important;
+      height: 18px;
+      width: 18px;
+    }
+    span {
+      font-size: 14px !important;
+    }
+  }
+}
+#accessibility_fab {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+}
+nav a.disabled {
+  pointer-events: none;
+}
+.menu-close-button {
+  float:right;
+}
+

package/projects/onemrva/design-system/layout/src/components/layout/layout.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+    let component: LayoutComponent;
+    let fixture: ComponentFixture<LayoutComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [LayoutComponent],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(LayoutComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});