Merge pull request #2 from louis-vgn/mobile-responsive

Mobile responsive
codegouvfr · Jul 5, 2024 · 0ede2c6 · 0ede2c6
2 parents 925259c + c2424ce
commit 0ede2c6
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/src/style.scss b/src/style.scss
@@ -16,25 +16,31 @@ pre, code {
 
 body:not(.close) {
   main {
-    align-items: start;
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-columns: $mobile-phone-width minmax(10px, 1fr);
+    display: flex;
+    flex-direction: row;
+
+    @media (max-width: $mobile-phone-width) {
+      overflow-x: hidden;
+    }
   }
 
   .sidebar {
-    @extend .fr-sidemenu--sticky-full-height;
     background-color: var(--background-default-grey);
     height: calc(100vh - 38px);
     overflow: auto;
     overflow-y: scroll;
+    position: sticky;
+    top: 0;
+    width: $mobile-phone-width;
+    flex-shrink: 0;
 
     @media (max-width: $mobile-phone-width) {
-      height: 100%;
-      left: 0;
       position: fixed;
       top: 0;
-      z-index: 1000;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: 20;
     }
 
     .app-name, .sidebar-nav {
@@ -92,7 +98,6 @@ body.close {
 }
 
 .sidebar-toggle {
-  background: var(--background-default-grey);
   bottom: 0;
   left: 0;
   padding: 10px;