@iamproperty/components 5.3.0-beta3 → 5.3.0-beta4

package/assets/sass/components/nav.scss

@@ -101,10 +101,6 @@
       @include light-mode() {
     
         @include reset-colours();
-
-        &:is(:hover,:focus){
-          color: var(--colour-inverted);
-        }
       }
 
       margin: 0!important;
@@ -130,6 +126,15 @@
   }
 }
 
+:host(.bg-primary) .btn {
+  
+
+    &:is(:hover,:focus){
+      color: var(--colour-inverted);
+    }
+  
+}
+
 // #region mobile and tablet menu
 @media screen and (max-width: 62em) {
   :host > .container {
@@ -581,11 +586,11 @@
 
   &:before {
     display: block ;
-    width: 100%;
+    width: calc(100% + 3rem);
     border-top: 2px solid var(--colour-border);
     z-index: 1;
-    padding-block: rem(24);
-    margin: 0;
+    padding: rem(24) 1.5rem;
+    margin: 0 -1.5rem;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: $headings-font-weight;
@@ -599,6 +604,9 @@
   
       font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
       line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
+      margin-right: -2.5rem;
+      padding-right: 2.5rem;
+      width: calc(100% + 4rem);
     }
   }
 
@@ -606,9 +614,13 @@
     content: attr(data-title);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
 
+    padding-right: 2.5rem !important;
+  }
 
+  @include media-breakpoint-up(md) {
+  
     height: calc(100vh - var(--nav-height));
     top: 100%;
   }
@@ -635,4 +647,25 @@
     backdrop-filter: blur(2px);
   }
 }
-// #endregion
+// #endregion
+
+// region compressed nav
+@include media-breakpoint-up(md) {
+  :host(.nav--md-compressed) .buttons-holder button {
+    margin-left: 1.5rem!important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn i[class*=fa-] {
+    margin-right: 0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn {
+    --btn-padding-inline: 2.5rem;
+  }
+
+  :host(.nav--md-compressed) ::slotted(a:not([slot=logo]):not([slot=secondary])){
+    margin-left: 1.5rem!important;
+  }
+}
+// #endregion

package/assets/ts/components/nav/nav.component.ts

@@ -231,7 +231,7 @@ class iamNav extends HTMLElement {
 
       if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
 
-        if(window.innerWidth > 992){
+        if(window.innerWidth > 992 && !event.target.closest('.nav--menu')){
 
           let summary = event.target.closest('summary');
           let details = summary.closest('details');