@vixcom/ui 1.2.0 → 1.4.0

package/src/styles/menu.scss

@@ -1,3 +1,4 @@
+@use 'sass:selector';
 @import 'mixins';
 
 /**
@@ -10,10 +11,12 @@
 
 @mixin mini-side-menu-toggled {
   .menu-header {
-    .menu-logo,
-    .main-menu-toggle {
+    .menu-logo {
       display: none;
     }
+    .menu-logo-alt {
+      display: block;
+    }
 
     .title {
       opacity: 0;
@@ -22,11 +25,15 @@
     }
   }
 
-  nav .item {
-    justify-content: center;
+  nav,
+  .nav {
+    .item {
+      justify-content: center;
+    }
   }
 
   nav,
+  .nav,
   .menu-header,
   .menu-footer {
     .item,
@@ -56,7 +63,6 @@ input.main-menu-trigger {
   width: 100%;
   transition: background-color 0.5s ease-in;
   border-radius: 0;
-  z-index: -1;
 
   &::after {
     display: none;
@@ -91,27 +97,41 @@ input.main-menu-trigger {
 .main-menu-toggle {
   position: relative;
   font-size: 120%;
-  margin-bottom: 0;
   z-index: 1;
 }
 
+.menu-container {
+  max-width: 100%;
+  overflow: hidden;
+}
+
 nav,
+.nav,
 .menu-header,
-.menu-footer {
-  width: 100%;
+.menu-footer,
+.menu-container {
   display: flex;
 }
 
-nav {
-  height: 100%;
-  font-size: 120%;
+.menu-header,
+.menu-footer {
+  align-items: center;
+}
+
+nav,
+.nav,
+.menu-container {
+  flex: 1 1 auto;
   gap: 0.5rem;
+}
 
+nav,
+.nav {
   .item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    padding: 0.5rem 1rem;
     text-decoration: none;
     color: currentColor;
 
@@ -122,13 +142,29 @@ nav {
   }
 }
 
-/* side-menu */
+/* Menu */
+
 .main-menu-container {
   position: relative;
-  display: flex;
-  flex-direction: row;
   width: 100%;
   height: 100%;
+  transition: 0.5s;
+
+  .side-menu {
+    nav,
+    .nav,
+    .menu-container {
+      flex-direction: column;
+    }
+  }
+
+  .menu-logo {
+    min-width: 7.5rem;
+  }
+
+  .menu-logo-alt {
+    display: none;
+  }
 
   &.rtl {
     .page {
@@ -141,12 +177,12 @@ nav {
     height: 100vh;
   }
 
-  &.grid {
-    display: grid;
-    grid-template-rows: 1fr;
-    transition: 0.5s;
+  &:has(> .side-menu) {
+    &.grid {
+      grid-template-columns: 1fr 4fr;
+    }
 
-    &:has(> .side-menu) > {
+    > {
       main,
       .page {
         section {
@@ -155,50 +191,48 @@ nav {
         }
       }
     }
+  }
 
-    > .side-menu {
-      grid-row: 1 / -1;
+  &:not(:has(> .side-menu)) {
+    &.flex {
+      flex-direction: column;
     }
   }
-}
-
-.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;
-  }
+  &.flex {
+    display: flex;
 
-  ::-webkit-scrollbar-thumb {
-    background-color: currentColor;
+    > .side-menu {
+      flex-basis: 25%;
+    }
   }
 
-  .menu-header,
-  .menu-footer {
-    padding: 1rem;
-    align-items: center;
+  &.grid {
+    display: grid;
+    // TODO: set grid direction to `row`
+    grid-template-rows: 1fr;
 
-    .title {
-      transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
+    > .side-menu {
+      grid-row: 1 / -1;
     }
   }
+}
+
+// FIXME: Grid parent overflow breaks
+.main-menu {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  transition: transform 0.5s;
+  z-index: 1;
 
-  nav {
-    flex-direction: column;
-    overflow-y: scroll;
-    overflow-x: hidden;
+  nav,
+  .nav {
+    font-size: 120%;
 
     .item {
+      // NOTE: Modify this in implementations
+      /* border-radius: inherit; */
       @include before-content;
 
       &::before {
@@ -207,7 +241,6 @@ nav {
         transition: opacity 0.5s;
       }
 
-      // MARKED: Extend & modify this according to UI/Theme
       &.active::before {
         opacity: 0.25;
       }
@@ -224,42 +257,42 @@ nav {
     }
   }
 
-  .icon {
-    // margin: 0.125rem 1em;
-    // margin-left: 0;
-  }
-
-  footer,
-  .menu-footer {
-    margin-top: auto;
+  > .main-menu-toggle {
+    font-size: 150%;
   }
 }
 
-.full-menu {
-  display: flex;
-  transition: transform 0.5s;
-  align-items: center;
-  justify-content: center;
+// TODO: upgrade: side-menu to edge-menu, This slides menu from all edge of the screen
+.side-menu {
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+  transition: flex-basis 0.5s, transform 0.5s, opacity 0.25s;
+  overflow: hidden;
 
-  nav {
-    align-items: center;
-    justify-content: center;
-    overflow: scroll;
+  /* side-menu scrollbar */
+  ::-webkit-scrollbar {
+    width: 0;
   }
-}
 
-.float-menu {
-  display: flex;
+  ::-webkit-scrollbar-thumb {
+    background-color: currentColor;
+  }
 
-  nav {
-    .item {
-      gap: 1rem;
+  .menu-header,
+  .menu-footer {
+    .title {
+      transition: height 0.5s linear 0.5s, opacity 0.5s linear 0.5s;
     }
   }
+  #{selector.nest('nav, .nav','.item')} {
+    min-width: auto;
+  }
 }
 
 /* Page */
 
+// FIXME: Scrolling breaks
 .page,
 main {
   display: flex;
@@ -270,8 +303,8 @@ main {
   margin: 0;
   flex: 1 1 100%;
   transition: width 0.5s;
-  overflow: hidden;
-  z-index: 1;
+  overflow-y: scroll;
+  z-index: 0;
 
   footer {
     background-color: var(--primary);
@@ -279,75 +312,43 @@ main {
   }
 }
 
-.page-content {
-  position: relative;
-  padding: 3em;
-  width: 100%;
-  flex: 1 1 100%;
-  transition: margin 0.2s;
+/* Mobile or PC (Tablet Excluded) */
+@media (max-width: 576px) or (min-width: 769px) {
 }
 
-/* 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: 769px) {
+  .main-menu-container {
+    .float-menu,
+    .full-menu {
+      nav,
+      .nav {
+        overflow-x: scroll;
       }
     }
-  }
-}
 
-/* 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;
     }
+    &.grid:has(> .side-menu.mini):has(> input.main-menu-trigger:checked) {
+      grid-template-columns: 1fr 20fr;
+      @include mini-side-menu-toggled;
+    }
 
-    &:not(.grid) {
+    &.flex {
       input.main-menu-trigger {
         &:checked {
           ~,
           ~ * {
             .side-menu:not(.mini) {
-              width: 0;
               flex-basis: 0;
-              opacity: 0;
-              padding: 0;
+              // opacity: 0;
+              // padding: 0;
             }
-          }
-        }
-
-        &:not(:checked) {
-          ~,
-          ~ * {
             .side-menu.mini {
-              width: 15%;
-              flex-basis: 15%;
+              flex-basis: 5%;
               @include mini-side-menu-toggled;
             }
-
-            main,
-            .page {
-              .page-header {
-                .main-menu-toggle {
-                  display: none;
-                }
-              }
-            }
           }
         }
       }
@@ -355,50 +356,29 @@ main {
   }
 }
 
-/* Above <---> Mobile */
-@media (min-width: 576px) {
+/* Above Mobile */
+@media (min-width: 577px) {
   .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;
+    .full-menu,
+    .float-menu {
+      .menu-container {
+        &,
+        nav,
+        .nav {
+          align-items: center;
+        }
+        nav,
+        .nav {
+          width: 100%;
+          overflow-x: scroll;
+        }
       }
     }
   }
-
-  .float-menu {
-    /* width: 75%; */
-  }
 }
 
-/* Mobile <---> Tablets/Mini PC */
-@media (min-width: 576px) and (max-width: 767.98px) {
+/* Tablets/Mini PC (Tablet Only) */
+@media (min-width: 577px) and (max-width: 768px) {
   // DEBUG: https://sass-lang.com/d/bogus-combinators
   // input.main-menu-trigger:checked {
   //   ~,
@@ -410,42 +390,25 @@ main {
   // }
 
   .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;
+    // WARN: Browser compatibility on :has pseudo-property
+
+    &.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
+      grid-template-columns: 1fr 12fr;
       @include mini-side-menu-toggled;
     }
 
-    &:not(.grid) {
-      input.main-menu-trigger:checked {
-        ~,
-        ~ * {
-          .side-menu {
-            width: 15%;
-            flex-basis: 15%;
-            @include mini-side-menu-toggled;
+    &.flex {
+      input.main-menu-trigger {
+        &:not(:checked) {
+          ~,
+          ~ * {
+            .side-menu {
+              flex-basis: 8.25%;
+              @include mini-side-menu-toggled;
+            }
           }
         }
       }
-
-      .side-menu {
-        .btn,
-        nav .item {
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-
-        .main-menu-toggle {
-          display: none;
-        }
-      }
     }
   }
 
@@ -454,100 +417,99 @@ main {
   }
 }
 
-/* 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; */
+/* Tablet Below */
+@media (max-width: 768px) {
+  .main-menu-container {
+    input.main-menu-trigger {
+      &:not(:checked) {
+        ~,
+        ~ * {
+          .full-menu,
+          .float-menu {
+            .menu-container {
+              nav,
+              .nav {
+                max-height: 0;
+                max-width: 0;
+              }
+            }
           }
         }
+      }
+    }
+
+    .float-menu {
+      .menu-container {
+        position: fixed;
+        bottom: 0;
+
+        &.right,
+        &:not(.left) {
+          right: 0;
+        }
 
-        // 3, float-menu
-        .float-menu > *:not(.main-menu-toggle) {
-          display: none;
+        &.left {
+          left: 0;
         }
       }
     }
+  }
+}
+
+/* Mobile Below */
+@media (max-width: 576px) {
+  // TODO: Move into main-menu-container
 
+  input.main-menu-trigger {
     &:checked {
       width: 100vw;
+      height: 100vh;
       background-color: hsla(var(--black-hs), var(--black-l), 0.2);
-      z-index: 2;
+      z-index: 1;
 
       ~,
       ~ * {
-        // 1. side-menu
+        .main-menu {
+          flex-direction: column;
+
+          .menu-header {
+            order: -1;
+          }
+        }
+
         .side-menu {
           transform: translateX(0);
           opacity: 1;
-
-          .main-menu-toggle {
-            transform: translateX(0);
-          }
         }
 
-        // 2. full-menu
-        .full-menu {
+        %blur-behind {
           --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;
-          }
+          backdrop-filter: blur(0.75rem);
         }
 
-        // 3, float-menu
         .float-menu {
-          width: 100%;
+          .menu-container {
+            @extend %blur-behind;
+          }
         }
+        .full-menu {
+          @extend %blur-behind;
+        }
+
+        .full-menu {
+          position: fixed;
+          transform: translateY(0);
+          opacity: 1;
+          font-size: 125%;
 
-        main,
-        .page {
-          .page-header .main-menu-toggle {
-            transform: translateX(-50%);
+          .menu-container {
+            background-color: unset;
           }
         }
       }
@@ -555,10 +517,19 @@ main {
   }
 
   .main-menu-container {
+    #{selector.nest('.main-menu', 'nav, .nav,.menu-container')},
+    &.flex {
+      flex-direction: column;
+    }
+
     &.grid:has(> .side-menu) {
       grid-template-columns: 1fr;
     }
 
+    #{selector.nest('.main-menu', 'nav, .nav')} {
+      overflow-y: scroll;
+    }
+
     .side-menu {
       position: fixed;
       top: 0;
@@ -569,7 +540,6 @@ main {
       transform: translateX(-100%);
       opacity: 0;
       box-shadow: 0 0 50px hsla(var(--black-hs), var(--black-l), 0.25);
-      z-index: 2;
     }
 
     .full-menu {
@@ -577,45 +547,10 @@ main {
       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;
-      }
-    }
   }
 }