@vixcom/ui 1.1.0 → 1.2.0

package/{styles → src/styles}/menu.scss

@@ -1,566 +1,621 @@
-@import 'mixins';
-
-/**
-* @Author vixson https://vixson.github.io
-* @Description Menu styles which includes:
-*              1. side-menu
-*              2. full-menu (fullscreen floating)
-*              2. float-menu (miniscreen corner floating)
-*/
-
-@mixin md-toggled-side-menu {
-  width: 15%;
-  flex-basis: 15%;
-
-  .menu-header {
-    .menu-logo,
-    .main-menu-toggle {
-      display: none;
-    }
-
-    .title {
-      opacity: 0;
-      height: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  .nav-menu .nav-item {
-    justify-content: center;
-  }
-
-  .icon {
-    /* margin-right: 0; */
-  }
-
-  .menu-header,
-  .menu-footer,
-  .nav-menu {
-    .nav-item,
-    .nav-title {
-      .label {
-        opacity: 0;
-        transform: translateX(100%);
-        position: absolute;
-      }
-    }
-
-    .nav-title {
-      border-bottom: thin solid;
-      padding: 0;
-
-      &::before {
-      }
-    }
-  }
-}
-
-.main-menu-trigger {
-  /* @include absolute-content; */
-  position: fixed !important;
-  left: 0;
-  top: 0;
-  padding: 0 !important;
-  margin: 0 !important;
-  height: 100% !important;
-  width: 100% !important;
-  transition: background-color 0.5s ease-in;
-  border-radius: 0 !important;
-  z-index: -1;
-
-  &::after {
-    display: none !important;
-  }
-
-  &:checked {
-    ~,
-    ~ * {
-      .side-menu.md {
-        opacity: 1;
-        @include md-toggled-side-menu;
-      }
-
-      .page {
-        > footer {
-          background-color: var(--primary);
-          color: var(--primary-c);
-        }
-      }
-    }
-  }
-
-  &:not(:checked) {
-    ~,
-    ~ * {
-      .menu-logo-alt {
-        display: none;
-      }
-    }
-  }
-}
-
-.main-menu-toggle {
-  position: relative;
-  /* font-size: 120%; */
-  margin-bottom: 0;
-  /* z-index: 1; */
-}
-
-.menu-header {
-  display: flex;
-}
-
-.nav-menu {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  font-size: 120%;
-  gap: 0.5rem;
-
-  .nav-item {
-    display: flex;
-    align-items: center;
-    padding: 1rem;
-    text-decoration: none;
-    color: currentColor;
-  }
-}
-
-/* side-menu */
-.side-menu-container {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-
-  &.rtl {
-    .page {
-      order: -1;
-    }
-  }
-}
-
-.side-menu {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 30%;
-  height: 100%;
-  margin: 0;
-  flex: 1 1 30%;
-  /* border-right: thin solid var(--secondary); */
-  transition: width 0.5s, flex-basis 0.5s, transform 0.5s, opacity 0.25s;
-  overflow: hidden;
-  z-index: 1;
-
-  /* side-menu scrollbar */
-  ::-webkit-scrollbar {
-    width: 0;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: currentColor;
-  }
-
-  .menu-header {
-    padding: 1rem;
-
-    .title {
-      transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
-    }
-  }
-
-  .nav-menu {
-    flex-direction: column;
-    overflow-y: scroll;
-    overflow-x: hidden;
-
-    .nav-item {
-      @include before-content;
-
-      &::before {
-        background-color: currentColor;
-        opacity: 0;
-        transition: opacity 0.5s;
-      }
-
-      &.active {
-        /* border-right: 2px solid; */
-
-        &::before {
-          opacity: 0.25;
-        }
-      }
-
-      &:hover::before {
-        opacity: 0.125;
-      }
-
-      .label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .icon {
-    // margin: 0.125rem 1em;
-    // margin-left: 0;
-  }
-
-  footer,
-  .menu-footer {
-    margin-top: auto;
-  }
-}
-
-.full-menu {
-  display: flex;
-  transition: transform 0.5s;
-  align-items: center;
-  justify-content: center;
-
-  .menu-header {
-    display: flex;
-  }
-
-  .nav-menu {
-    align-items: center;
-    justify-content: center;
-    overflow: scroll;
-  }
-}
-
-.float-menu {
-  display: flex;
-
-  .nav-menu {
-    .nav-item {
-      gap: 1rem;
-    }
-  }
-}
-
-/* Page */
-
-.page {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  flex: 1 1 100%;
-  transition: width 0.5s;
-  overflow: hidden;
-  z-index: 1;
-
-  footer {
-    background-color: var(--secondary);
-    color: var(--white);
-  }
-}
-
-.page-content {
-  position: relative;
-  padding: 3em;
-  width: 100%;
-  flex: 1 1 100%;
-  // border: thin solid var(--white);
-  transition: margin 0.2s;
-}
-
-/* Above <---> Tablets/Mini PC */
-@media (min-width: 768px) {
-  .main-menu-trigger {
-    &:checked {
-      ~,
-      ~ * {
-        .side-menu {
-          width: 0;
-          flex-basis: 0;
-          opacity: 0;
-          padding: 0;
-        }
-      }
-    }
-
-    &:not(:checked) {
-      ~,
-      ~ * {
-        .side-menu.minimized {
-          @include md-toggled-side-menu;
-        }
-
-        .page .app-header {
-          .main-menu-toggle {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-}
-
-/* Above <---> Mobile */
-@media (min-width: 576px) {
-  .float-menu,
-  .full-menu {
-    align-items: center;
-
-    .menu-header {
-      // .menu-logo,
-      .main-menu-toggle {
-        display: none;
-      }
-    }
-  }
-
-  .float-menu {
-    /* width: 75%; */
-  }
-
-  .main-menu-trigger {
-    &,
-    &::before,
-    &::after {
-      background-color: transparent !important;
-    }
-
-    &:not(:checked) {
-      ~,
-      ~ * {
-        .page {
-          /* TODO: Use this on Sibemenu Type 2 - Page overlaps side-menu */
-          /* 
-          border-left: thin solid;
-          @include before-content;
-
-          &::before {
-            box-shadow: 0 0 2.5rem -1.75rem hsla(var(--black-hs), var(--black-l), 0.125);
-          } */
-          /* ---- */
-        }
-      }
-    }
-  }
-}
-
-/* Mobile <---> Tablets/Mini PC */
-@media (min-width: 576px) and (max-width: 767.98px) {
-  .main-menu-trigger {
-    &:not(:checked) {
-      ~,
-      ~ * {
-        .side-menu * > {
-          .label {
-            transition: position 0.25s linear 0.125s,
-              transform 0.25s linear 0.125s, opacity 0.5s linear 0.125s;
-          }
-        }
-      }
-    }
-
-    &:checked {
-      ~,
-      ~ * {
-        .side-menu {
-          @include md-toggled-side-menu;
-        }
-      }
-    }
-  }
-
-  .side-menu {
-    .btn,
-    .nav-menu .nav-item {
-      padding-left: 1rem;
-      padding-right: 1rem;
-    }
-
-    .main-menu-toggle {
-      display: none;
-    }
-  }
-
-  .float-menu {
-    /* width: 50%; */
-  }
-}
-
-/* Tablets/Mini PC <---> BELOW */
-@media (max-width: 767.98px) {
-  .side-menu .btn {
-    min-width: auto;
-  }
-}
-
-/* Mobile <--> BELOW */
-@media (max-width: 575.98px) {
-  .main-menu-trigger {
-    &:not(:checked) {
-      &,
-      &::before,
-      &::after {
-        background-color: transparent !important;
-      }
-
-      ~,
-      ~ * {
-        .full-menu {
-          .nav-menu {
-            display: none;
-            /* transform: translateY(-100%); */
-            /* opacity: 0; */
-          }
-        }
-
-        // 3, float-menu
-        .float-menu > *:not(.main-menu-toggle) {
-          display: none;
-        }
-      }
-    }
-
-    &:checked {
-      width: 100vw;
-      background-color: hsla(var(--black-hs), var(--black-l), 0.2);
-      z-index: 2;
-
-      ~,
-      ~ * {
-        // 1. side-menu
-        .side-menu {
-          transform: translateX(0);
-          opacity: 1;
-
-          .main-menu-toggle {
-            transform: translateX(0);
-          }
-
-          .menu-logo-alt {
-            display: none;
-          }
-        }
-
-        // 2. full-menu
-        .full-menu {
-          --background-color: hsla(
-            var(--secondary-hs),
-            var(--secondary-l),
-            0.125
-          );
-          position: fixed;
-          flex-direction: column;
-          transform: translateY(0);
-          opacity: 1;
-          font-size: 125%;
-          background-color: var(--background-color);
-          color: var(--secondary-c);
-          backdrop-filter: blur(10px);
-          z-index: 2;
-
-          .btn {
-            color: var(--secondary-c) !important;
-
-            &:hover {
-              background-color: var(--secondary-c) !important;
-              color: var(--secondary) !important;
-            }
-          }
-
-          .menu-header {
-            order: -1;
-            padding: 1rem;
-
-            .menu-logo {
-              display: none;
-            }
-
-            .menu-logo-alt {
-              fill: var(--white);
-            }
-
-            .silhouette {
-              filter: saturate(0%) brightness(500%);
-            }
-          }
-
-          .nav-menu {
-            flex-direction: column;
-          }
-        }
-
-        // 3, float-menu
-        .float-menu {
-          width: 100%;
-        }
-
-        .page .app-header .main-menu-toggle {
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-
-  .side-menu {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 80%;
-    flex-basis: 80%;
-    transform: translateX(-100%);
-    opacity: 0;
-    box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
-    z-index: 2;
-  }
-
-  .full-menu {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* transform: translateY(-100%); */
-    /* opacity: 0; */
-    z-index: 2;
-
-    .main-menu-trigger:not(:checked) & {
-    }
-
-    // .nav-menu {
-    //   display: none;
-    // }
-
-    .menu-header {
-      width: 100%;
-    }
-  }
-
-  .float-menu {
-    position: fixed;
-    bottom: 0;
-    /* left: 0; */
-    right: 0;
-    display: flex;
-    flex-direction: column;
-
-    .nav-menu {
-      flex-direction: column;
-    }
-
-    .nav-menu,
-    .menu-header,
-    .menu-footer {
-      padding: 1rem;
-    }
-  }
-
-  .page {
-    .page-content {
-      padding: 3em 1em;
-    }
-  }
-}
+@import 'mixins';
+
+/**
+* @Author vixson https://vixson.github.io
+* @Description Menu styles which includes:
+*              1. side-menu
+*              2. full-menu (fullscreen floating)
+*              2. float-menu (miniscreen corner floating)
+*/
+
+@mixin mini-side-menu-toggled {
+  .menu-header {
+    .menu-logo,
+    .main-menu-toggle {
+      display: none;
+    }
+
+    .title {
+      opacity: 0;
+      height: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  nav .item {
+    justify-content: center;
+  }
+
+  nav,
+  .menu-header,
+  .menu-footer {
+    .item,
+    .title {
+      .label {
+        opacity: 0;
+        transform: translateX(100%);
+        position: absolute;
+      }
+    }
+
+    .title {
+      border-bottom: thin solid;
+      padding: 0;
+    }
+  }
+}
+
+input.main-menu-trigger {
+  /* @include absolute-content; */
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  transition: background-color 0.5s ease-in;
+  border-radius: 0;
+  z-index: -1;
+
+  &::after {
+    display: none;
+  }
+
+  &,
+  &::before,
+  &::after {
+    background-color: transparent;
+  }
+
+  &:checked {
+    ~,
+    ~ * {
+      main,
+      .page {
+        > footer {
+          background-color: var(--secondary);
+          color: var(--secondary-c);
+        }
+      }
+    }
+  }
+
+  &:not(:checked) {
+    ~,
+    ~ * {
+    }
+  }
+}
+
+.main-menu-toggle {
+  position: relative;
+  font-size: 120%;
+  margin-bottom: 0;
+  z-index: 1;
+}
+
+nav,
+.menu-header,
+.menu-footer {
+  width: 100%;
+  display: flex;
+}
+
+nav {
+  height: 100%;
+  font-size: 120%;
+  gap: 0.5rem;
+
+  .item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    text-decoration: none;
+    color: currentColor;
+
+    .label {
+      transition: position 0.25s linear 0.125s, transform 0.25s linear 0.125s,
+        opacity 0.5s linear 0.125s;
+    }
+  }
+}
+
+/* side-menu */
+.main-menu-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+
+  &.rtl {
+    .page {
+      order: -1;
+    }
+  }
+
+  &:is(body) {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &.grid {
+    display: grid;
+    grid-template-rows: 1fr;
+    transition: 0.5s;
+
+    &:has(> .side-menu) > {
+      main,
+      .page {
+        section {
+          height: 100%;
+          min-height: unset;
+        }
+      }
+    }
+
+    > .side-menu {
+      grid-row: 1 / -1;
+    }
+  }
+}
+
+.side-menu {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  margin: 0;
+  flex: 1 1 30%;
+  /* border-right: thin solid var(--secondary); */
+  transition: width 0.5s, flex-basis 0.5s, transform 0.5s, opacity 0.25s;
+  overflow: hidden;
+  z-index: 1;
+
+  /* side-menu scrollbar */
+  ::-webkit-scrollbar {
+    width: 0;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: currentColor;
+  }
+
+  .menu-header,
+  .menu-footer {
+    padding: 1rem;
+    align-items: center;
+
+    .title {
+      transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
+    }
+  }
+
+  nav {
+    flex-direction: column;
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    .item {
+      @include before-content;
+
+      &::before {
+        background-color: currentColor;
+        opacity: 0;
+        transition: opacity 0.5s;
+      }
+
+      // MARKED: Extend & modify this according to UI/Theme
+      &.active::before {
+        opacity: 0.25;
+      }
+
+      &:hover::before {
+        opacity: 0.125;
+      }
+
+      .label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .icon {
+    // margin: 0.125rem 1em;
+    // margin-left: 0;
+  }
+
+  footer,
+  .menu-footer {
+    margin-top: auto;
+  }
+}
+
+.full-menu {
+  display: flex;
+  transition: transform 0.5s;
+  align-items: center;
+  justify-content: center;
+
+  nav {
+    align-items: center;
+    justify-content: center;
+    overflow: scroll;
+  }
+}
+
+.float-menu {
+  display: flex;
+
+  nav {
+    .item {
+      gap: 1rem;
+    }
+  }
+}
+
+/* Page */
+
+.page,
+main {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  flex: 1 1 100%;
+  transition: width 0.5s;
+  overflow: hidden;
+  z-index: 1;
+
+  footer {
+    background-color: var(--primary);
+    color: var(--primary-c);
+  }
+}
+
+.page-content {
+  position: relative;
+  padding: 3em;
+  width: 100%;
+  flex: 1 1 100%;
+  transition: margin 0.2s;
+}
+
+/* Excluding Tablets */
+@media (max-width: 575.98px) or (min-width: 768px) {
+  input.main-menu-trigger {
+    &:checked {
+      ~,
+      ~ * {
+        .side-menu .menu-logo-alt {
+          display: none;
+        }
+      }
+    }
+    &:not(:checked) {
+      ~,
+      ~ * {
+        .side-menu:not(.mini) .menu-logo-alt {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+/* Above <---> Tablets/Mini PC */
+@media (min-width: 768px) {
+  // TODO: Flip minimized state, Make Above tablet minimized when checked, table minimized when unchecked
+  .main-menu-container {
+    &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
+      grid-template-columns: 0fr 1fr;
+    }
+
+    &:not(.grid) {
+      input.main-menu-trigger {
+        &:checked {
+          ~,
+          ~ * {
+            .side-menu:not(.mini) {
+              width: 0;
+              flex-basis: 0;
+              opacity: 0;
+              padding: 0;
+            }
+          }
+        }
+
+        &:not(:checked) {
+          ~,
+          ~ * {
+            .side-menu.mini {
+              width: 15%;
+              flex-basis: 15%;
+              @include mini-side-menu-toggled;
+            }
+
+            main,
+            .page {
+              .page-header {
+                .main-menu-toggle {
+                  display: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Above <---> Mobile */
+@media (min-width: 576px) {
+  .main-menu-container {
+    &.grid {
+      &:has(> .side-menu:not(.mini)),
+      &:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
+        grid-template-columns: 1fr 4fr;
+      }
+
+      &:has(> .side-menu.mini):has(> input.main-menu-trigger:not(:checked)) {
+        grid-template-columns: 1fr 11fr;
+        @include mini-side-menu-toggled;
+      }
+      > .side-menu {
+        align-items: center;
+      }
+    }
+
+    &:not(.grid) {
+      .side-menu {
+        width: 30%;
+      }
+    }
+  }
+
+  .float-menu,
+  .full-menu {
+    align-items: center;
+
+    .menu-header {
+      .menu-logo, // TODO: Review
+      .main-menu-toggle {
+        display: none;
+      }
+    }
+  }
+
+  .float-menu {
+    /* width: 75%; */
+  }
+}
+
+/* Mobile <---> Tablets/Mini PC */
+@media (min-width: 576px) and (max-width: 767.98px) {
+  // DEBUG: https://sass-lang.com/d/bogus-combinators
+  // input.main-menu-trigger:checked {
+  //   ~,
+  //   ~ * {
+  //     @include unify-selector('.main-menu-container.grid', &) {
+  //       content: 'trigger in grid';
+  //     }
+  //   }
+  // }
+
+  .main-menu-container {
+    &:has(> .side-menu.mini):has(> input.main-menu-trigger:checked),
+    &:has(> .side-menu:not(.mini)):has(
+        > input.main-menu-trigger:not(:checked)
+      ) {
+      .menu-logo-alt {
+        display: none;
+      }
+    }
+    &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
+      grid-template-columns: 1fr 11fr;
+      @include mini-side-menu-toggled;
+    }
+
+    &:not(.grid) {
+      input.main-menu-trigger:checked {
+        ~,
+        ~ * {
+          .side-menu {
+            width: 15%;
+            flex-basis: 15%;
+            @include mini-side-menu-toggled;
+          }
+        }
+      }
+
+      .side-menu {
+        .btn,
+        nav .item {
+          padding-left: 1rem;
+          padding-right: 1rem;
+        }
+
+        .main-menu-toggle {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .float-menu {
+    /* width: 50%; */
+  }
+}
+
+/* Tablets/Mini PC <---> BELOW */
+@media (max-width: 767.98px) {
+  .side-menu .btn {
+    min-width: auto;
+  }
+}
+
+/* Mobile <--> BELOW */
+@media (max-width: 575.98px) {
+  input.main-menu-trigger {
+    &:not(:checked) {
+      ~,
+      ~ * {
+        .full-menu {
+          nav {
+            display: none;
+            /* transform: translateY(-100%); */
+            /* opacity: 0; */
+          }
+        }
+
+        // 3, float-menu
+        .float-menu > *:not(.main-menu-toggle) {
+          display: none;
+        }
+      }
+    }
+
+    &:checked {
+      width: 100vw;
+      background-color: hsla(var(--black-hs), var(--black-l), 0.2);
+      z-index: 2;
+
+      ~,
+      ~ * {
+        // 1. side-menu
+        .side-menu {
+          transform: translateX(0);
+          opacity: 1;
+
+          .main-menu-toggle {
+            transform: translateX(0);
+          }
+        }
+
+        // 2. full-menu
+        .full-menu {
+          --background-color: hsla(
+            var(--secondary-hs),
+            var(--secondary-l),
+            0.125
+          );
+          position: fixed;
+          flex-direction: column;
+          transform: translateY(0);
+          opacity: 1;
+          font-size: 125%;
+          background-color: var(--background-color);
+          color: var(--secondary-c);
+          backdrop-filter: blur(10px);
+          z-index: 2;
+
+          .btn {
+            color: var(--secondary-c);
+
+            &:hover {
+              background-color: var(--secondary-c);
+              color: var(--secondary);
+            }
+          }
+
+          .menu-header {
+            order: -1;
+            padding: 1rem;
+
+            .menu-logo {
+              display: none;
+            }
+          }
+
+          nav {
+            flex-direction: column;
+          }
+        }
+
+        // 3, float-menu
+        .float-menu {
+          width: 100%;
+        }
+
+        main,
+        .page {
+          .page-header .main-menu-toggle {
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+
+  .main-menu-container {
+    &.grid:has(> .side-menu) {
+      grid-template-columns: 1fr;
+    }
+
+    .side-menu {
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 80%;
+      flex-basis: 80%;
+      transform: translateX(-100%);
+      opacity: 0;
+      box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
+      z-index: 2;
+    }
+
+    .full-menu {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      /* transform: translateY(-100%); */
+      /* opacity: 0; */
+      z-index: 2;
+
+      input.main-menu-trigger:not(:checked) & {
+      }
+
+      // nav {
+      //   display: none;
+      // }
+
+      .menu-header {
+        width: 100%;
+      }
+    }
+
+    .float-menu {
+      position: fixed;
+      bottom: 0;
+      /* left: 0; */
+      right: 0;
+      display: flex;
+      flex-direction: column;
+
+      nav {
+        flex-direction: column;
+      }
+
+      nav,
+      .menu-header,
+      .menu-footer {
+        padding: 1rem;
+      }
+    }
+
+    .page {
+      .page-content {
+        padding: 3em 1em;
+      }
+    }
+  }
+}