Jake Vanderwerf
5 days ago 75a097a018a0090f5902758353c578fce4aa2a25
src/drawer-menu/style.scss
New file
@@ -0,0 +1,88 @@
nav.drawer {
   position: fixed;
   right: 0;
   bottom: 0;
   max-height: 100vh;
   overflow: hidden auto;
   width: var(--btn);
   z-index: var(--z-5);
   transition: var(--trans-size);
   --dir: column-reverse;
   background-color: rgb(var(--base));
   border-left: 1px solid rgb(var(--base-200));
   box-shadow:rgba(var(--base), var(--op-4)) var(--shdw-left);
   height: auto;
   --w: var(--chip_);
   .title,
   .section-title {
      display: none;
   }
   ul .icon {
      min-width: var(--chip_);
   }
   a,
   .a {
      height: var(--chipchip);
      padding: 0 .5rem;
      width: 100%;
      gap: .5rem;
      justify-content: center;
   }
   .toggle {
      width: 100%;
      .icon {
         transform: rotate(0);
         transition: var(--trans-transform);
      }
   }
   &.open {
      width: 240px;
      .title,
      .section-title {
         display: block;
      }
      .toggle .icon {
         transform: rotate(180deg);
      }
      a,
      .a {
         justify-content: flex-start;
      }
   }
   ul {
      --dir: column;
      --gap: 0;
      --height: auto;
      padding: 0;
      margin: 0;
      height: auto;
      width:100%;
   }
   li {
      height: auto;
      width: 100%;
   }
   .row {
      width: 100%;
   }
   .menu-section {
      border-bottom: 1px solid rgb(var(--contrast-200));
   }
   .section-title {
      padding: 0.5rem var(--px);
      font-size: var(--small);
      text-transform: uppercase;
      opacity: 0.6;
      font-weight: bold;
   }
}