Skip to content

Instantly share code, notes, and snippets.

@msrxse

msrxse/MenuLayout.js

Created November 19, 2018 08:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save msrxse/c4390d8e6070f3f6d0b933f128b83f3f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save msrxse/c4390d8e6070f3f6d0b933f128b83f3f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Marco Suarez created this gist Nov 19, 2018.
    50 changes: 50 additions & 0 deletions MenuLayout.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    /**
    * 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;
    }
    }