Mobile nav aside fine tunning

epfl-si · May 1, 2024 · 26c6487 · 26c6487
1 parent 1529e32
commit 26c6487
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/assets/components/organisms/nav-aside/nav-aside.scss b/assets/components/organisms/nav-aside/nav-aside.scss
@@ -25,6 +25,24 @@
 .nav-aside-layout .nav-aside-wrapper {
   display: block;
 
+  @include media-breakpoint-down(lg) {
+    padding: 1rem;
+
+    .nav-aside {
+      [class^="h"] {
+        padding: 0;
+      }
+      a {
+        padding-inline: 1rem;
+        font-size: 1rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    height: 100%;
+  }
+
   @include media-breakpoint-up(xxl){
     flex: 0 0 16.1%;
     max-width: 16.1%;

diff --git a/assets/components/organisms/nav-aside/nav-aside.twig b/assets/components/organisms/nav-aside/nav-aside.twig
@@ -5,7 +5,7 @@
   aria-describedby="nav-aside-title"
 >
   <h2 class="h5 sr-only-xl" id="nav-aside-title">Dans la même section</h2>
-  <ul>
+  <ul class="nav-menu">
   {% if nav_aside_items %}
     {% for item in nav_aside_items %}
     {% if item.siblings_before and loop.index0 == nav_aside_active %}

diff --git a/assets/components/organisms/nav-mobile/nav-mobile.scss b/assets/components/organisms/nav-mobile/nav-mobile.scss
@@ -64,11 +64,3 @@
     }
   }
 }
-
-.nav-aside-layout .nav-aside-wrapper {
-  @include media-breakpoint-up(xl) {
-    height: 100%;
-  }
-}
-
-