@vixcom/ui 1.0.0

package/styles/menu.scss

@@ -0,0 +1,566 @@
+@import 'mixins';
+
+/**
+* @Author vixson https://vixson.github.io
+* @Description Menu styles which includes:
+*              1. sidemenu
+*              2. fullmenu (fullscreen floating)
+*              2. floatmenu (miniscreen corner floating)
+*/
+
+@mixin md-toggled-sidemenu {
+  width: 15%;
+  flex-basis: 15%;
+
+  .menu-header {
+    .menu-logo,
+    .appmenu-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 {
+      }
+    }
+  }
+}
+
+.appmenu-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 {
+    ~,
+    ~ * {
+      .sidemenu.md {
+        opacity: 1;
+        @include md-toggled-sidemenu;
+      }
+
+      .page {
+        > footer {
+          background-color: var(--primary);
+          color: var(--primary-c);
+        }
+      }
+    }
+  }
+
+  &:not(:checked) {
+    ~,
+    ~ * {
+      .menu-logo-alt {
+        display: none;
+      }
+    }
+  }
+}
+
+.appmenu-toggle {
+  position: relative;
+  /* font-size: 120%; */
+  margin-bottom: 0;
+  /* z-index: 1; */
+}
+
+.menu-header {
+  display: flex;
+}
+
+.nav-menu {
+  /* border-top: 1px solid; */
+  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;
+  }
+}
+
+/* Sidemenu */
+.sidemenu-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+
+  &.rtl {
+    .page {
+      order: -1;
+    }
+  }
+}
+
+.sidemenu {
+  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;
+
+  /* Sidemenu 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;
+  }
+}
+
+.fullmenu {
+  display: flex;
+  transition: transform 0.5s;
+  align-items: center;
+
+  .menu-header {
+    display: flex;
+  }
+
+  .nav-menu {
+    align-items: center;
+    justify-content: center;
+    overflow: scroll;
+  }
+}
+
+.floatmenu {
+  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) {
+  .appmenu-trigger {
+    &:checked {
+      ~,
+      ~ * {
+        .sidemenu {
+          width: 0;
+          flex-basis: 0;
+          opacity: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    &:not(:checked) {
+      ~,
+      ~ * {
+        .sidemenu.minimized {
+          @include md-toggled-sidemenu;
+        }
+
+        .page .app-header {
+          .appmenu-toggle {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Above <---> Mobile */
+@media (min-width: 576px) {
+  .floatmenu,
+  .fullmenu {
+    align-items: center;
+
+    .menu-header {
+      // .menu-logo,
+      .appmenu-toggle {
+        display: none;
+      }
+    }
+  }
+
+  .floatmenu {
+    /* width: 75%; */
+  }
+
+  .appmenu-trigger {
+    &,
+    &::before,
+    &::after {
+      background-color: transparent !important;
+    }
+
+    &:not(:checked) {
+      ~,
+      ~ * {
+        .page {
+          /* TODO: Use this on Sibemenu Type 2 - Page overlaps Sidemenu */
+          /* 
+          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) {
+  .appmenu-trigger {
+    &:not(:checked) {
+      ~,
+      ~ * {
+        .sidemenu * > {
+          .label {
+            transition: position 0.25s linear 0.125s,
+              transform 0.25s linear 0.125s, opacity 0.5s linear 0.125s;
+          }
+        }
+      }
+    }
+
+    &:checked {
+      ~,
+      ~ * {
+        .sidemenu {
+          @include md-toggled-sidemenu;
+        }
+      }
+    }
+  }
+
+  .sidemenu {
+    .btn,
+    .nav-menu .nav-item {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .appmenu-toggle {
+      display: none;
+    }
+  }
+
+  .floatmenu {
+    /* width: 50%; */
+  }
+}
+
+/* Tablets/Mini PC <---> BELOW */
+@media (max-width: 767.98px) {
+  .sidemenu .btn {
+    min-width: auto;
+  }
+}
+
+/* Mobile <--> BELOW */
+@media (max-width: 575.98px) {
+  .appmenu-trigger {
+    &:not(:checked) {
+      &,
+      &::before,
+      &::after {
+        background-color: transparent !important;
+      }
+
+      ~,
+      ~ * {
+        .fullmenu {
+          .nav-menu {
+            display: none;
+            /* transform: translateY(-100%); */
+            /* opacity: 0; */
+          }
+        }
+
+        // 3, Floatmenu
+        .floatmenu > *:not(.appmenu-toggle) {
+          display: none;
+        }
+      }
+    }
+
+    &:checked {
+      width: 100vw;
+      background-color: hsla(var(--black-hs), var(--black-l), 0.2);
+      z-index: 2;
+
+      ~,
+      ~ * {
+        // 1. Sidemenu
+        .sidemenu {
+          transform: translateX(0);
+          opacity: 1;
+
+          .appmenu-toggle {
+            transform: translateX(0);
+          }
+
+          .menu-logo-alt {
+            display: none;
+          }
+        }
+
+        // 2. Fullmenu
+        .fullmenu {
+          --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, Floatmenu
+        .floatmenu {
+          width: 100%;
+        }
+
+        .page .app-header .appmenu-toggle {
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+
+  .sidemenu {
+    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;
+  }
+
+  .fullmenu {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    /* transform: translateY(-100%); */
+    /* opacity: 0; */
+    z-index: 2;
+
+    .appmenu-trigger:not(:checked) & {
+    }
+
+    // .nav-menu {
+    //   display: none;
+    // }
+
+    .menu-header {
+      width: 100%;
+    }
+  }
+
+  .floatmenu {
+    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;
+    }
+  }
+}

package/styles/polyfills.scss

@@ -0,0 +1,9 @@
+@supports not (gap: 1em) {
+  .nav-menu {
+    margin: -0.5em;
+  }
+
+  .nav-menu>* {
+    margin: 0.5em;
+  }
+}