@vixcom/ui 1.3.0 → 1.4.0

package/src/styles/menu.scss

@@ -1,3 +1,4 @@
+@use 'sass:selector';
 @import 'mixins';
 
 /**
@@ -13,6 +14,9 @@
     .menu-logo {
       display: none;
     }
+    .menu-logo-alt {
+      display: block;
+    }
 
     .title {
       opacity: 0;
@@ -59,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;
@@ -94,29 +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;
 }
 
+.menu-header,
+.menu-footer {
+  align-items: center;
+}
+
 nav,
-.nav {
-  height: 100%;
-  font-size: 120%;
+.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;
 
@@ -135,6 +150,22 @@ nav,
   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 {
       order: -1;
@@ -150,6 +181,7 @@ nav,
     &.grid {
       grid-template-columns: 1fr 4fr;
     }
+
     > {
       main,
       .page {
@@ -161,9 +193,15 @@ nav,
     }
   }
 
+  &:not(:has(> .side-menu)) {
+    &.flex {
+      flex-direction: column;
+    }
+  }
+
   &.flex {
     display: flex;
-    flex-direction: row;
+
     > .side-menu {
       flex-basis: 25%;
     }
@@ -180,42 +218,21 @@ nav,
   }
 }
 
-.side-menu {
+// FIXME: Grid parent overflow breaks
+.main-menu {
   display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
+  padding: 0;
   margin: 0;
-  transition: width 0.5s, flex-basis 0.5s, transform 0.5s, opacity 0.25s;
-  overflow: hidden;
+  transition: transform 0.5s;
   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,
   .nav {
-    flex-direction: column;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    font-size: 120%;
 
     .item {
+      // NOTE: Modify this in implementations
+      /* border-radius: inherit; */
       @include before-content;
 
       &::before {
@@ -224,7 +241,6 @@ nav,
         transition: opacity 0.5s;
       }
 
-      // MARKED: Extend & modify this according to UI/Theme
       &.active::before {
         opacity: 0.25;
       }
@@ -241,44 +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,
-  .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,
-  .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;
@@ -289,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);
@@ -305,12 +319,14 @@ main {
 /* 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;
+    .float-menu,
+    .full-menu {
+      nav,
+      .nav {
+        overflow-x: scroll;
       }
     }
+
     &.grid:has(> .side-menu:not(.mini)):has(> input.main-menu-trigger:checked) {
       grid-template-columns: 0fr 1fr;
     }
@@ -325,31 +341,16 @@ main {
           ~,
           ~ * {
             .side-menu:not(.mini) {
-              width: 0;
               flex-basis: 0;
-              opacity: 0;
-              padding: 0;
-
-              .menu-logo-alt {
-                display: none;
-              }
+              // opacity: 0;
+              // padding: 0;
             }
             .side-menu.mini {
-              width: 5%;
               flex-basis: 5%;
               @include mini-side-menu-toggled;
             }
           }
         }
-
-        &:not(:checked) {
-          ~,
-          ~ * {
-            .menu-logo-alt {
-              display: none;
-            }
-          }
-        }
       }
     }
   }
@@ -357,19 +358,22 @@ main {
 
 /* Above Mobile */
 @media (min-width: 577px) {
-  .float-menu,
-  .full-menu {
-    align-items: center;
-
-    // .menu-header {
-    //   .main-menu-toggle {
-    //     display: none;
-    //   }
-    // }
-  }
-
-  .float-menu {
-    /* width: 75%; */
+  .main-menu-container {
+    .full-menu,
+    .float-menu {
+      .menu-container {
+        &,
+        nav,
+        .nav {
+          align-items: center;
+        }
+        nav,
+        .nav {
+          width: 100%;
+          overflow-x: scroll;
+        }
+      }
+    }
   }
 }
 
@@ -388,31 +392,18 @@ main {
   .main-menu-container {
     // WARN: Browser compatibility on :has pseudo-property
 
-    &.grid:has(> input.main-menu-trigger:checked) {
-      .menu-logo-alt {
-        display: none;
-      }
-    }
-
-    &.grid:has(> input.main-menu-trigger:not(:checked)) {
+    &.grid:has(> .side-menu):has(> input.main-menu-trigger:not(:checked)) {
       grid-template-columns: 1fr 12fr;
       @include mini-side-menu-toggled;
     }
 
     &.flex {
       input.main-menu-trigger {
-        &:checked {
-          .menu-logo-alt {
-            display: none;
-          }
-        }
-
         &:not(:checked) {
           ~,
           ~ * {
             .side-menu {
-              width: 7.5%;
-              flex-basis: 7.5%;
+              flex-basis: 8.25%;
               @include mini-side-menu-toggled;
             }
           }
@@ -426,92 +417,99 @@ main {
   }
 }
 
-/* Below Mobile */
-@media (max-width: 576px) {
-  input.main-menu-trigger {
-    &:not(:checked) {
-      ~,
-      ~ * {
-        .full-menu {
-          nav,
-          .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 > *:not(.main-menu-toggle) {
-          display: none;
+    .float-menu {
+      .menu-container {
+        position: fixed;
+        bottom: 0;
+
+        &.right,
+        &:not(.left) {
+          right: 0;
+        }
+
+        &.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;
 
       ~,
       ~ * {
+        .main-menu {
+          flex-direction: column;
+
+          .menu-header {
+            order: -1;
+          }
+        }
+
         .side-menu {
           transform: translateX(0);
           opacity: 1;
-
-          .main-menu-toggle {
-            transform: translateX(0);
-          }
         }
 
-        .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;
-
-          button {
-            color: var(--secondary-c);
-
-            &:hover {
-              background-color: var(--secondary-c);
-              color: var(--secondary);
-            }
-          }
-
-          .menu-header {
-            order: -1;
-            padding: 1rem;
-
-            // .menu-logo {
-            //   display: none;
-            // }
-          }
-
-          nav,
-          .nav {
-            flex-direction: column;
-          }
+          backdrop-filter: blur(0.75rem);
         }
 
         .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;
           }
         }
       }
@@ -519,14 +517,19 @@ main {
   }
 
   .main-menu-container {
-    .menu-logo-alt {
-      display: none;
+    #{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;
@@ -537,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 {
@@ -545,41 +547,10 @@ main {
       left: 0;
       right: 0;
       bottom: 0;
-      /* transform: translateY(-100%); */
-      /* opacity: 0; */
-      z-index: 2;
-
-      input.main-menu-trigger:not(:checked) & {
-      }
-
-      // nav,.nav {
-      //   display: none;
-      // }
 
       .menu-header {
         width: 100%;
       }
     }
-
-    .float-menu {
-      position: fixed;
-      bottom: 0;
-      /* left: 0; */
-      right: 0;
-      display: flex;
-      flex-direction: column;
-
-      nav,
-      .nav {
-        flex-direction: column;
-      }
-
-      nav,
-      .nav,
-      .menu-header,
-      .menu-footer {
-        padding: 1rem;
-      }
-    }
   }
 }

package/src/styles/sizes.scss

@@ -50,7 +50,7 @@ $directions: (
           'vh',
           $_dimension
         );
-        #{$limit}height: #{$size}#{$_boxDimension} !important;
+        #{$limit}height: #{$size}#{$_boxDimension};
       }
 
       #{'.'}#{$limit}#{$dimensionType}#{'w-'}#{$breakPointKey}#{$sizeKey} {
@@ -59,7 +59,7 @@ $directions: (
           'vw',
           $_dimension
         );
-        #{$limit}width: #{$size}#{$_boxDimension} !important;
+        #{$limit}width: #{$size}#{$_boxDimension};
       }
     }
   }

package/src/css/app.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../styles/app.scss","../styles/_mixins.scss"],"names":[],"mappings":"AAEA;AAEA;EACE;EACA;EACA;AACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;;;AAcF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;EAEE;EACA;;AAIA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;ACrEA;EACE;;AAGF;AACE;EACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;ADwFF;EACE;;;AAIJ;EACE;;;AAGF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AChKO;EDmKL;;;AAKN;EACE;EACA;AACA;EACA;EACA;;AAEA;AACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EAGE;EACA;;AAIJ;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAKE;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;;AAIJ;ECpPE;EACA;EACA;;;ADsPF;ECxPE;EACA;EACA;;ADyPA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;;;AAIJ;EC5QE;EACA;EACA;ED4QA;EACA;AACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAGE;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;;;AAUF;AAAA;AACE;AACA;EACA;EACA;AACA;;AAEA;AAAA;AACE;EACA;;AAGF;AAAA;EACE;;;AAKN;AAAA;EAEE;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;AAIE;EAEE;EACA;EACA;;AAEA;EACE;;AAIA;AAAA;AAAA;AAAA;AAAA;EAEE;;AAMR;EACE;;AAGF;AAAA;AAAA;EAGE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;;;AAGF;AAmIE;AAAA;AAAA;AAAA;AAAA;;AAlIA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EAEE;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;;;AAUJ;EACE;EACA;;AAGE;AAAA;AAAA;EAGE;EACA;;AAIJ;EACE;EACA;EACA;EACA;AACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;AACA;EACA;;AAGA;EAEE;;AAGF;EACE;;AAKA;AAAA;AAAA;EAGE;;AAKJ;AAAA;EAEE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;EAEE;;AAKF;AAAA;EAEE;EACA;;AAGF;EACE;EACA;;AAIA;AAAA;EAEE;;AAMJ;AAAA;AAEE;EACA;;AAGF;AAAA;EAEE;;AAKF;AAAA;EAEE;;AAIJ;AAAA;EAEE;AACA;;;AAIJ;EACE;EACA;;ACtxBA;EACE;;AAGF;AACE;EACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;ADwyBF;EACE;;AC3wBF;EACE;;AAGF;EAEE;;AAGF;EApCA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;AD+yBA;EACE;EAEA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;;AChzBF;EACE;;AAGF;AACE;EACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;ADk0BA;EACE;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;AACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;;AAIA;EACE;;AAIJ;EACE;EACA;;AAEA;EACE;;ACn2BJ;EACE;;AAGF;EAEE;;AAGF;EApCA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;AD84BA;EACE;;AAKF;EACE;;AAEA;EACE;;AASJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAQJ;EACE;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAUN;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAeF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;AACA;;AAEA;EACE;;AAOF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAQJ;AACE;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAEA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKN;AACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAaF;EACE;;AAGF;EACE;;AAGF;AAAA;EAEE;AACA;EACA;EACA;EACA;EACA;EACA;;AAGE;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAYR;AAAA;AAAA;EAGE;EACA;EACA;EACA;EAEA;EACA;;AAYA;AAAA;AAAA;EACE;;AAMF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;AACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAaF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAIJ;AAAA;AAAA;EACE;EACA;EACA;EACA;;;AAKN;AAGE;EACE;;;AAIJ;AAEA;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;AACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;ECzzCE;EACA;EACA;;AD0zCA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;AAEA;;AACA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAIJ;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;AACA;AACA;;AAGF;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC96CF;EACE;;AAGF;AACE;EACA;;AAGF;EArBA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;ADo8CF;AACE;EACA;EACA;;AAEA;AACE;;AAGF;EACE;;AAIJ;EACE;;AAIA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EAEE;AACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;;AAIA;AAAA;EACE;EACA;;AAEA;AAAA;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAMJ;AAAA;EACE;;AAEA;AAAA;EACE;;AAMR;AAAA;EACE;;AAEA;AAAA;EACE;;AAIJ;AAAA;EACE;AACA;AACA;EACA;EACA;EACA;;AAaA;AAAA;EACE;AACA;EACA;;AAIA;AAAA;EACE;;AAIJ;AAAA;AACE;;;AAKN;EACE;AACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;;;AAGF;EAEE;ECjpDA;EACA;EACA;;ADmpDE;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EAKE;;AAJA;EACE;;AAMJ;EACE;EACA;;;AAKF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAKN;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EClxDE;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;ED4wDA;;ACzxDA;EAEE;;;AA8BF;EACE;;AAGF;EAEE;;AAGF;EApCA;EAXA;EACA;EACA;EAWA;EACA;EACA;EACA;EACA;EACA;EACA;;AAbA;EAEE;;AD6xDF;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;AACA;EAEI;IACE;IACA;;EAOF;IACE;;;AAKN;AACA;EACE;AAAA;IAEE;IACA;;EAEA;AAAA;IACE;;EAGF;AAAA;IACE;;EAIJ;AACE;IACA;;EAEA;IACE;;EAIJ;IACE;;EAEA;IACE;;EAKF;IACE;;EAKE;IACE;;EAGF;IACE;;EAOJ;AAAA;IACE;;EAGF;AAAA;IACE;IAEA;IACA;;;AAMR;AACA;EACE;IACE;;EAIA;IACE;;EAGF;IACE;IACA;;EAKF;IACE;IACA","file":"app.css"}

package/src/pages/sidemenu/index.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <base href="/">
-  <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/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 ${type}`" x-data="{type:'grid',mini: true}">
-  <input type="checkbox" id="main-menu-trigger" class="main-menu-trigger">
-  <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>
-      <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">
-      <label for="main-menu-trigger" class="bi bi-list main-menu-toggle"></label>
-      <img src="assets/img/default.png" alt="logo" class="sq-3">
-    </header>
-    <section>
-      <h1>VX Dashboard Sidemenu</h1>
-      <div>
-        <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>
-    <footer>All rights reserved</footer>
-    <style>
-      .main-menu-trigger:checked~.page {
-        border-top: thick solid var(--secondary);
-      }
-
-      .main-menu {}
-    </style>
-</body>
-
-</html>