fix(drawer): updated drawer

Author: nsemets

src/app/core/components/topnav/topnav.component.html

@@ -1,11 +1,11 @@
 <section class="nav-container flex align-items-center justify-content-between">
-  <img ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" priority />
+  <img class="logo-img" ngSrc="assets/images/logo.svg" alt="OSF Logo" height="36" width="106" priority />
 
   <p-drawer
-    [modal]="true"
+    [closable]="false"
     [visible]="isDrawerVisible()"
+    [motionOptions]="{ duration: 100 }"
     (visibleChange)="isDrawerVisible.set($event)"
-    [closable]="false"
   >
     <osf-nav-menu (closeMenu)="toggleMenuVisibility()" />
   </p-drawer>

src/app/core/components/topnav/topnav.component.scss

@@ -9,11 +9,16 @@
   padding: mix.rem(28px) mix.rem(24px);
   color: var(--white);
 
+  .logo-img {
+    z-index: 1105;
+  }
+
   .topnav-btn {
     height: mix.rem(36px);
     width: mix.rem(36px);
 
     --p-button-contrast-background: transparent;
     --p-button-contrast-border-color: transparent;
+    z-index: 1105;
   }
 }

src/styles/overrides/drawer.scss

@@ -1,4 +1,4 @@
-.p-drawer.p-drawer-active.p-drawer-left {
+.p-drawer {
   --p-drawer-background: var(--dark-blue-1);
   --p-drawer-header-padding: 0;
   --p-drawer-content-padding: 0;