Skip to content

Instantly share code, notes, and snippets.

@msrxse

msrxse/MenuLayout.js

Created November 19, 2018 08:15
Show Gist options
  • Save msrxse/c4390d8e6070f3f6d0b933f128b83f3f to your computer and use it in GitHub Desktop.
Save msrxse/c4390d8e6070f3f6d0b933f128b83f3f to your computer and use it in GitHub Desktop.
Download ZIP
menu layout transition of flex grow
Raw
MenuLayout.js
/**
* This file is the exception to mobile first CSS
* Both mobile and higher resolution screens have its own css
*/
@media (max-width: 35em) {
.wrapper {
display: flex;
}
.aside {
position: fixed;
top: 0;
bottom: 0;
transform: translateX(-220px);
transition: transform var(--transition_main_menu_time) ease-in;
z-index: 3;
}
.main {
flex: 1 1 auto;
}
.isOpen .aside {
transform: translateX(0);
}
}
@media (min-width: 35em) {
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
}
.aside {
flex: 0 0 40px;
overflow: hidden;
transition: all var(--transition_main_menu_time) linear;
}
.main {
flex: 1 1 auto;
overflow: hidden;
transition: all var(--transition_main_menu_time) linear;
}
.isOpen .aside {
flex: 0 0 200px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment