Initial commit

express/public/sass/components/_admin-side-menu.scss

@@ -0,0 +1,251 @@
+@use "../variables/variables" as v;
+
+body {
+  background-color: v.$nav-white;
+  // text-align:center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.admin-nav-mobile {
+  display: flex;
+  align-content: center;
+  padding: v.$panel-split-padding-vertical 0;
+  // padding-top: 16px;
+  // padding
+  // background-color: v.$side-nav-mobile-color;
+
+  .nav-button {
+    z-index: 10;
+
+    background: none;
+    border: none;
+    img {
+      display: inline-block;
+      width: 24px;
+      margin: 0 24px;
+    }
+  }
+
+  .nav-title {
+    // font-weight: 300;
+    z-index: 10;
+    color: v.$navigation-maincolor;
+    font-size: 1.2rem;
+  }
+}
+
+.admin-nav-content {
+  a {
+    font-weight: 400;
+    color: #46535b;
+    text-decoration: none;
+    display: block;
+  }
+
+  a:visited {
+    color: #46535b;
+    text-decoration: none;
+  }
+
+  /* NOTE - it is reduced to the focused list item
+  
+  a.menu-selected {
+    color: v.$navigation-maincolor;  
+  }*/
+
+  > li {
+    padding: 8px;
+    border-radius: 6px;
+    line-height: 0rem;
+
+    > a {
+      p {
+        display: inline-block;
+      }
+
+      img {
+        margin: 0 8px 0 0;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .sub-links {
+      list-style: none;
+      display: block;
+      padding-top: 4px;
+      padding-bottom: 8px;
+
+      a {
+        margin-left: 24px;
+        line-height: 1.8rem;
+        display: block;
+      }
+
+      li:hover {
+        background: #ffffff;
+        opacity: 0.5;
+        border-radius: 6px;
+        // width: 100%;
+        margin-right: 20px;
+      }
+      .disabled-li-hover:hover {
+        background: none;
+        opacity: 1;
+      }
+    }
+
+    &.focused-menu {
+      background-color: #ffffff;
+      .active {
+        color: v.$navigation-maincolor;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
+.closed {
+  left: -420px;
+}
+
+.opened {
+  left: 0 !important;
+}
+
+#burger-menu-img {
+  height: 24px;
+  width: 24px;
+}
+
+.admin-nav-item:hover {
+  background: v.$side-nav-mobile-color;
+  opacity: 0.5;
+  border-radius: 6px;
+}
+
+.root-container {
+  flex: 1;
+}
+
+.admin-nav {
+  background: #ffffff;
+  box-shadow: 0px 4px 40px rgb(0 0 0 / 25%);
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: 500;
+}
+
+@media (min-width: v.$layout-breakpoint-x-large) {
+  .admin-nav {
+    position: relative;
+    z-index: 50;
+    top: 65px;
+  }
+
+  .root-container {
+    display: flex;
+  }
+
+  .admin-nav-mobile {
+    background-color: v.$nav-white;
+    position: fixed;
+    padding-bottom: 0;
+    .nav-button {
+      display: none;
+    }
+
+    .nav-title {
+      /*margin-top: 1rem;*/
+      // margin-top: 1.5rem !important;
+      margin-top: 0 !important;
+      display: block;
+      min-width: 15rem;
+      font-weight: 300;
+      margin-top: 4rem;
+      margin-left: 2rem;
+      font-size: 1.5rem;
+      color: #848c91;
+
+      a {
+        text-decoration: none;
+
+        &:active {
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .admin-nav-content {
+    > li {
+      &.focused-menu {
+        background-color: v.$side-nav-mobile-color;
+        .active {
+          color: v.$navigation-maincolor;
+          font-weight: 700;
+        }
+        .disabled-menu {
+          font-style: italic;
+          font-weight: 400;
+          color: gray;
+        }
+      }
+    }
+  }
+}
+
+///////////////////*
+/* w3schools nav sample 
+    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav
+    https://www.w3schools.com/howto/howto_js_sidenav.asp
+*/
+
+/*
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {
+    padding-top: 15px;
+  }
+  .sidenav a {
+    font-size: 1.125rem;
+  }
+}
+
+*/