Skip to content

Commit 0ede2c6

Browse files
authored
Merge pull request #2 from louis-vgn/mobile-responsive
Mobile responsive
2 parents 925259c + c2424ce commit 0ede2c6

File tree

1 file changed

+14
-9
lines changed

1 file changed

+14
-9
lines changed

src/style.scss

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,31 @@ pre, code {
1616

1717
body:not(.close) {
1818
main {
19-
align-items: start;
20-
display: grid;
21-
grid-gap: 1rem;
22-
grid-template-columns: $mobile-phone-width minmax(10px, 1fr);
19+
display: flex;
20+
flex-direction: row;
21+
22+
@media (max-width: $mobile-phone-width) {
23+
overflow-x: hidden;
24+
}
2325
}
2426

2527
.sidebar {
26-
@extend .fr-sidemenu--sticky-full-height;
2728
background-color: var(--background-default-grey);
2829
height: calc(100vh - 38px);
2930
overflow: auto;
3031
overflow-y: scroll;
32+
position: sticky;
33+
top: 0;
34+
width: $mobile-phone-width;
35+
flex-shrink: 0;
3136

3237
@media (max-width: $mobile-phone-width) {
33-
height: 100%;
34-
left: 0;
3538
position: fixed;
3639
top: 0;
37-
z-index: 1000;
40+
left: 0;
41+
width: 100vw;
42+
height: 100vh;
43+
z-index: 20;
3844
}
3945

4046
.app-name, .sidebar-nav {
@@ -92,7 +98,6 @@ body.close {
9298
}
9399

94100
.sidebar-toggle {
95-
background: var(--background-default-grey);
96101
bottom: 0;
97102
left: 0;
98103
padding: 10px;

0 commit comments

Comments
 (0)