@vixcom/ui 1.2.0 → 1.3.0

package/src/css/menu.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAGE;;AAQI;AAAA;AAAA;AAAA;EACE;EACA;;AAaV;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAMN;AACA;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAKI;AAAA;EACE;EACA;;AAKN;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AAEA;;AACA;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;AAIJ;EACE;EACA;EACA;;AC/JF;EACE;;AAGF;AACE;EACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;ADmLE;EACE;EACA;EACA;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAUN;AAAA;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;AAGE;EACE;;;AAKN;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;AACA;EAKQ;AAAA;IACE;;EAOF;AAAA;IACE;;;AAOV;AACA;EAGI;IACE;;EAQM;AAAA;IACE;IACA;IACA;IACA;;EAQF;AAAA;IACE;IACA;;EAtUV;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;IACE;;EAQE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;;EA+SU;AAAA;AAAA;AAAA;IACE;;;AAWlB;AACA;EAGM;IAEE;;EAGF;IACE;;EAnWJ;AAAA;IAEE;;EAGF;IACE;IACA;IACA;;EAIJ;IACE;;EAQE;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;AAAA;IACE;IACA;;EAwUA;IACE;;EAKF;IACE;;EAKN;AAAA;IAEE;;EAGE;AAAA;AAAA;AAAA;IAEE;;EAKN;AACE;;;AAIJ;AACA;EAgBM;IACE;;EAGJ;IACE;;EAzZF;AAAA;IAEE;;EAGF;IACE;IACA;IACA;;EAIJ;IACE;;EAQE;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;AAAA;IACE;IACA;;EAmYI;AAAA;IACE;IACA;;EAnaR;AAAA;AAAA;AAAA;IAEE;;EAGF;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;IACE;;EAQE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;IACA;;EAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;IACE;IACA;;EA4YE;AAAA;IAEE;IACA;;EAGF;IACE;;EAMR;AACE;;;AAIJ;AACA;EACE;IACE;;;AAIJ;AACA;EAMU;AAAA;IACE;AACA;AACA;;EAKJ;AAAA;IACE;;EAKN;IACE;IACA;IACA;;EAKE;AAAA;IACE;IACA;;EAEA;AAAA;IACE;;EAKJ;AAAA;IACE;AAAA;AAAA;AAAA;AAAA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;AAAA;IACE;;EAEA;AAAA;IACE;IACA;;EAIJ;AAAA;IACE;IACA;;EAEA;AAAA;IACE;;EAIJ;AAAA;IACE;;EAKJ;AAAA;IACE;;EAKA;AAAA;AAAA;AAAA;IACE;;EAQR;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;IACA;AACA;AACA;IACA;;EASA;IACE;;EAIJ;IACE;IACA;AACA;IACA;IACA;IACA;;EAEA;IACE;;EAGF;AAAA;AAAA;IAGE;;EAKF;IACE","file":"menu.css"}
+{"version":3,"sourceRoot":"","sources":["../styles/menu.scss","../styles/_mixins.scss"],"names":[],"mappings":"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","file":"menu.css"}

package/src/index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>VX Dashboard</title>
+  <link rel="stylesheet" href="css/external/bootstrap.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
   <script>
@@ -19,7 +20,6 @@
       <a href="pages/tier-1" class="btn btn-primary">Tier 1</a>
       <a href="pages/tier-2" class="btn btn-secondary">Tier 2</a>
       <a href="pages/sidemenu" class="btn btn-accent">Sidemenu</a>
-      <a href="pages/fulmenu" class="btn btn-color-1">Fullmenu</a>
     </div>
     <hr>
     <div class="p-3 flex-container">

package/src/pages/sidemenu/{grid.html → index.html}

@@ -6,33 +6,34 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sidemenu Grid - VX Dashboard</title>
+  <title>Sidemenu - VX Dashboard</title>
   <link rel="stylesheet" href="css/icons/external/bootstrap.icons.css">
   <link rel="stylesheet" href="css/external/bootstrap.css">
   <link rel="stylesheet" href="css/index.css">
   <link rel="stylesheet" href="css/menu.css">
   <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
+  <script src="https://unpkg.com/alpinejs" defer></script>
 </head>
 
-<body class="main-menu-container grid">
+<body :class="`main-menu-container ${type}`" x-data="{type:'grid',mini: true}">
   <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger">
-  <div class="side-menu mini bg-primary">
-    <div class="menu-header">
-      <img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon">
-      <img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon-alt">
-      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle ml-auto" />
-    </div>
+  <div class="side-menu bg-primary" :class="{mini}">
+    <header class="menu-header">
+      <img src="assets/img/logo.png" class="main-logo menu-logo silhouette" alt="icon">
+      <img src="assets/img/icon.png" class="main-logo menu-logo-alt" alt="icon-alt">
+    </header>
     <nav>
-      <a class="item" href="flex.html">
-        <i class="icon bi bi-bounding-box"></i>
-        <span class="label">Flex</span>
-      </a>
-      <a class="item active" href="grid.html">
-        <i class="icon bi bi-grid"></i>
-        <span class="label">Grid</span>
-      </a>
+      <template x-for="(v,k) of {flex:'bounding-box', grid: 'grid'}">
+        <label class="item" :class="{active: k === type}" :title="k">
+          <i :class="`icon bi bi-${v}`"></i>
+          <span class="label" x-text="k"></span>
+          <input class="d-none" type="radio" name="type" :value="k" x-model="type">
+        </label>
+      </template>
     </nav>
-
+    <footer class="menu-footer">
+      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle ml-auto" />
+    </footer>
   </div>
   <main>
     <header class="page-header sticky">
@@ -42,8 +43,12 @@
     <section>
       <h1>VX Dashboard Sidemenu</h1>
       <div>
-        <menu class="side-menu">
-          <li>UI</li>
+        <menu>
+          <label class="item gap-1 checkbox">
+            <input class="default" type="checkbox" name="mini" x-model="mini">
+            <span class="lasbel">Side Menu as Mini</span>
+          </label>
+          <label for="main-menu-trigger" class="item gap-1 flex-item"><i class="bi bi-list font-1"></i>Toggle Menu</label>
         </menu>
       </div>
     </section>
@@ -52,6 +57,8 @@
       .main-menu-trigger:checked~.page {
         border-top: thick solid var(--secondary);
       }
+
+      .main-menu {}
     </style>
 </body>
 

package/src/styles/index.scss

@@ -6,7 +6,7 @@
 // @import 'https://unpkg.com/bootstrap@latest/dist/css/bootstrap.min.css';
 // @import 'external/bootstrap.css';
 @import 'variables.css';
-@import 'app.css';
+@import 'main.css';
 @import 'sizes.css';
 @import 'colors.css';
 @import 'animations.css';

package/src/styles/{app.scss → main.scss}

@@ -1899,14 +1899,15 @@ section {
   padding: 1.25rem;
 }
 
-@media (min-width: 576px) {
+/* Above Mobile */
+@media (min-width: 577px) {
   .md-sticky {
     position: sticky;
   }
 }
 
-/* ABOVE <-- Tablets/Mini PC */
-@media (min-width: 768px) {
+/* Above Tablets/Mini PC */
+@media (min-width: 769px) {
   .item-list {
     .item > .value {
       margin-left: 1rem;
@@ -1923,8 +1924,8 @@ section {
   }
 }
 
-/* Tables/Mini PC <---> BELOW */
-@media (max-width: 767.98px) {
+/* Below Tables/Mini PC */
+@media (max-width: 768px) {
   .page-header,
   .section-header {
     padding: 0;
@@ -1989,8 +1990,8 @@ section {
   }
 }
 
-/* Mobile <---> BELOW */
-@media (max-width: 575.98px) {
+/* Below Mobile */
+@media (max-width: 576px) {
   .card {
     width: 100%;
   }

package/src/styles/menu.scss

@@ -10,8 +10,7 @@
 
 @mixin mini-side-menu-toggled {
   .menu-header {
-    .menu-logo,
-    .main-menu-toggle {
+    .menu-logo {
       display: none;
     }
 
@@ -22,11 +21,15 @@
     }
   }
 
-  nav .item {
-    justify-content: center;
+  nav,
+  .nav {
+    .item {
+      justify-content: center;
+    }
   }
 
   nav,
+  .nav,
   .menu-header,
   .menu-footer {
     .item,
@@ -96,13 +99,15 @@ input.main-menu-trigger {
 }
 
 nav,
+.nav,
 .menu-header,
 .menu-footer {
   width: 100%;
   display: flex;
 }
 
-nav {
+nav,
+.nav {
   height: 100%;
   font-size: 120%;
   gap: 0.5rem;
@@ -122,13 +127,13 @@ nav {
   }
 }
 
-/* side-menu */
+/* Menu */
+
 .main-menu-container {
   position: relative;
-  display: flex;
-  flex-direction: row;
   width: 100%;
   height: 100%;
+  transition: 0.5s;
 
   &.rtl {
     .page {
@@ -141,12 +146,11 @@ nav {
     height: 100vh;
   }
 
-  &.grid {
-    display: grid;
-    grid-template-rows: 1fr;
-    transition: 0.5s;
-
-    &:has(> .side-menu) > {
+  &:has(> .side-menu) {
+    &.grid {
+      grid-template-columns: 1fr 4fr;
+    }
+    > {
       main,
       .page {
         section {
@@ -155,6 +159,20 @@ nav {
         }
       }
     }
+  }
+
+  &.flex {
+    display: flex;
+    flex-direction: row;
+    > .side-menu {
+      flex-basis: 25%;
+    }
+  }
+
+  &.grid {
+    display: grid;
+    // TODO: set grid direction to `row`
+    grid-template-rows: 1fr;
 
     > .side-menu {
       grid-row: 1 / -1;
@@ -168,8 +186,6 @@ nav {
   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;
@@ -185,7 +201,7 @@ nav {
 
   .menu-header,
   .menu-footer {
-    padding: 1rem;
+    // padding: 1rem;
     align-items: center;
 
     .title {
@@ -193,7 +209,8 @@ nav {
     }
   }
 
-  nav {
+  nav,
+  .nav {
     flex-direction: column;
     overflow-y: scroll;
     overflow-x: hidden;
@@ -241,7 +258,8 @@ nav {
   align-items: center;
   justify-content: center;
 
-  nav {
+  nav,
+  .nav {
     align-items: center;
     justify-content: center;
     overflow: scroll;
@@ -251,7 +269,8 @@ nav {
 .float-menu {
   display: flex;
 
-  nav {
+  nav,
+  .nav {
     .item {
       gap: 1rem;
     }
@@ -279,45 +298,28 @@ 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 {
+    &.grid:has(> input.main-menu-trigger:not(:checked)),
+    &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
+      .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;
     }
+    &.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 {
           ~,
@@ -327,6 +329,15 @@ main {
               flex-basis: 0;
               opacity: 0;
               padding: 0;
+
+              .menu-logo-alt {
+                display: none;
+              }
+            }
+            .side-menu.mini {
+              width: 5%;
+              flex-basis: 5%;
+              @include mini-side-menu-toggled;
             }
           }
         }
@@ -334,19 +345,8 @@ main {
         &:not(:checked) {
           ~,
           ~ * {
-            .side-menu.mini {
-              width: 15%;
-              flex-basis: 15%;
-              @include mini-side-menu-toggled;
-            }
-
-            main,
-            .page {
-              .page-header {
-                .main-menu-toggle {
-                  display: none;
-                }
-              }
+            .menu-logo-alt {
+              display: none;
             }
           }
         }
@@ -355,41 +355,17 @@ main {
   }
 }
 
-/* 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%;
-      }
-    }
-  }
-
+/* Above Mobile */
+@media (min-width: 577px) {
   .float-menu,
   .full-menu {
     align-items: center;
 
-    .menu-header {
-      .menu-logo, // TODO: Review
-      .main-menu-toggle {
-        display: none;
-      }
-    }
+    // .menu-header {
+    //   .main-menu-toggle {
+    //     display: none;
+    //   }
+    // }
   }
 
   .float-menu {
@@ -397,8 +373,8 @@ main {
   }
 }
 
-/* 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,40 +386,36 @@ 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)
-      ) {
+    // WARN: Browser compatibility on :has pseudo-property
+
+    &.grid:has(> input.main-menu-trigger:checked) {
       .menu-logo-alt {
         display: none;
       }
     }
-    &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
-      grid-template-columns: 1fr 11fr;
+
+    &.grid: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 {
+        &:checked {
+          .menu-logo-alt {
+            display: none;
           }
         }
-      }
 
-      .side-menu {
-        .btn,
-        nav .item {
-          padding-left: 1rem;
-          padding-right: 1rem;
-        }
-
-        .main-menu-toggle {
-          display: none;
+        &:not(:checked) {
+          ~,
+          ~ * {
+            .side-menu {
+              width: 7.5%;
+              flex-basis: 7.5%;
+              @include mini-side-menu-toggled;
+            }
+          }
         }
       }
     }
@@ -454,28 +426,21 @@ main {
   }
 }
 
-/* Tablets/Mini PC <---> BELOW */
-@media (max-width: 767.98px) {
-  .side-menu .btn {
-    min-width: auto;
-  }
-}
-
-/* Mobile <--> BELOW */
-@media (max-width: 575.98px) {
+/* Below Mobile */
+@media (max-width: 576px) {
   input.main-menu-trigger {
     &:not(:checked) {
       ~,
       ~ * {
         .full-menu {
-          nav {
+          nav,
+          .nav {
             display: none;
             /* transform: translateY(-100%); */
             /* opacity: 0; */
           }
         }
 
-        // 3, float-menu
         .float-menu > *:not(.main-menu-toggle) {
           display: none;
         }
@@ -484,12 +449,12 @@ main {
 
     &:checked {
       width: 100vw;
+      height: 100vh;
       background-color: hsla(var(--black-hs), var(--black-l), 0.2);
       z-index: 2;
 
       ~,
       ~ * {
-        // 1. side-menu
         .side-menu {
           transform: translateX(0);
           opacity: 1;
@@ -499,7 +464,6 @@ main {
           }
         }
 
-        // 2. full-menu
         .full-menu {
           --background-color: hsla(
             var(--secondary-hs),
@@ -516,7 +480,7 @@ main {
           backdrop-filter: blur(10px);
           z-index: 2;
 
-          .btn {
+          button {
             color: var(--secondary-c);
 
             &:hover {
@@ -529,17 +493,17 @@ main {
             order: -1;
             padding: 1rem;
 
-            .menu-logo {
-              display: none;
-            }
+            // .menu-logo {
+            //   display: none;
+            // }
           }
 
-          nav {
+          nav,
+          .nav {
             flex-direction: column;
           }
         }
 
-        // 3, float-menu
         .float-menu {
           width: 100%;
         }
@@ -555,6 +519,10 @@ main {
   }
 
   .main-menu-container {
+    .menu-logo-alt {
+      display: none;
+    }
+
     &.grid:has(> .side-menu) {
       grid-template-columns: 1fr;
     }
@@ -584,7 +552,7 @@ main {
       input.main-menu-trigger:not(:checked) & {
       }
 
-      // nav {
+      // nav,.nav {
       //   display: none;
       // }
 
@@ -601,21 +569,17 @@ main {
       display: flex;
       flex-direction: column;
 
-      nav {
+      nav,
+      .nav {
         flex-direction: column;
       }
 
       nav,
+      .nav,
       .menu-header,
       .menu-footer {
         padding: 1rem;
       }
     }
-
-    .page {
-      .page-content {
-        padding: 3em 1em;
-      }
-    }
   }
 }

package/src/pages/sidemenu/flex.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <base href="/dist">
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sidemenu - VX Dashboard</title>
-  <link rel="stylesheet" href="css/index.css">
-  <link rel="stylesheet" href="css/menu.css">
-  <link rel="stylesheet" href="css/icons/external/bootstrap.icons.css">
-  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
-</head>
-
-<body class="main-menu-container">
-  <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger">
-  <div class="side-menu bg-secondary is-blur">
-    <div class="side-menu-header">
-      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
-    </div>
-  </div>
-  <div class="page">
-    <div class="page-content">
-      <div class="app-header sticky">
-        <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
-        <img src="assets/img/logo.png" alt="" class="main-logo">
-      </div>
-      <section>
-        <h1>VX Dashboard Sidemenu</h1>
-      </section>
-    </div>
-  </div>
-</body>
-
-</html>