[design] improve menu layout with tabs

Author: zombieFox

css/menu.css

@@ -1,43 +1,83 @@
 .menu{
 background-color:var(--gray-02);
 border-radius:var(--radius);
-padding:calc(var(--gutter) *4);
 position: fixed;
 bottom:1em;
 left:1em;
 width:calc(100%-2em);
-max-height:calc(60vh-2em);
+height:calc(70vh-2em);
 overflow-y: scroll;
 z-index:3000;
-display: grid;
-/* grid-template-columns: repeat(1, minmax(1em, 1fr)); */
-grid-template-columns:repeat(auto-fill,minmax(12em,1fr));
 transform:translateY(calc(100%+2em));
 transition: transform var(--animation-speed-fast) ease-in-out;
-grid-gap:calc(var(--gutter) *8);
+/* display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+ grid-gap: var(--line-width); */
 }
 
 .is-menu-open .menu{
 transform:translateY(0);
 }
 
-.menu-item{
-position: relative;
+.menu-nav:not(:last-child){
+margin:0;
+}
+
+.menu-area{
+display: none;
+}
+
+.menu-area.active{
+display: block;
+}
+
+.menu-nav-button{
+margin:0;
+padding:1.5em2em;
+border-radius:0;
+}
+
+.menu-nav-button.active{
+background-color:var(--gray-04);
+color:var(--white);
+}
+
+.menu-content{
+padding:2em;
+}
+
+.menu-sub-area{
+display: grid;
+grid-template-columns:repeat(auto-fill,minmax(14em,1fr));
+grid-gap:2em;
+}
+
+.menu-header{
+border-top:var(--line-width) solid var(--gray-04);
+padding-top:1em;
 }
 
-.menu-item:not(:first-child):before{
-/* content: ""
- border-left: 1px solid var(--gray-04);
- position: absolute;
- top: 0;
- left: -2em;
- width: calc(100% + 1px);
- height: calc(100% + 1px);
- pointer-events: none; */
+@media (min-width:550px){
+ .menu{
+height:calc(70vh-2em);
+ }
+
+ .menu-nav{
+display: flex;
+ }
 }
 
 @media (min-width:900px){
  .menu{
-max-height:calc(80vh-2em);
+height:calc(50vh-2em);
+ }
+
+ .menu-nav{
+display: flex;
+ }
+
+ .menu-sub-area{
+display: grid;
+grid-template-columns:repeat(auto-fill,minmax(20em,1fr));
  }
 }