ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/sidemenu/sidemenu.scss

@@ -0,0 +1,264 @@
+.sidemenu {
+  .intro {
+    .logo-wrapper {
+      border-bottom: none;
+    }
+
+    // border-bottom: 1px solid #eaeaea;
+  }
+
+  .sidebar-footer {
+    img.footer-logo {
+      width: 175px;
+    }
+  }
+}
+
+.sidemenu {
+  .intro {
+    padding: 10px;
+    height: 57px;
+
+    // border-bottom: 1px solid #eaeaea;
+
+    .logo-wrapper {
+      border-bottom: none;
+    }
+
+    h3 {
+      margin-left: 10px;
+    }
+  }
+}
+
+.sidemenu {
+  .side-loader {
+    margin: 20px 20px;
+  }
+
+  .intro {
+    padding: 5px 16px;
+    position: fixed;
+    z-index: 1000;
+    width: 17%;
+    background: #fff;
+    // border-bottom: 1.5px solid #24aeb8;
+    &.close{
+      width:6% !important
+    }
+
+    .logo-wrapper {
+      // height: 15px;
+      // border-bottom: 1px solid #eaeaea;
+
+      .sidemenu-brand-logo {
+        // width: 50%;
+        // margin: 10px;
+        // width: 200px;
+
+        &.open {
+          // height: 15px;
+          // height: 10px;
+          width: 100px !important;
+        }
+
+        &.close {
+          height: 17px;
+
+          width: 59px !important;
+        }
+
+        @media only screen and (max-width: 500px) {
+          margin-right: 0px;
+// margin: 10px;
+          width: 150px;
+        }
+
+        cursor: pointer;
+      }
+    }
+
+    small {
+      margin: 0px 10px;
+    }
+
+    .locations {
+      margin: 10px 0px;
+
+      .ant-tag {
+        margin-right: 4px;
+
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  .menu-item {
+    padding-top: 10px;
+    // height: calc(100vh - 48px); /* Adjust height */
+    height: 100vh;
+    margin-top: 0px;
+    width: 256px;
+    top: 48px;
+    border-bottom: 1px solid #f0f0f0;
+    position: fixed;
+    height: 100vh;
+    margin-top: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 211px;
+    padding-bottom: 50px;
+
+    /* Custom Scrollbar like macOS */
+    scrollbar-width: thin; /* For Firefox */
+    scrollbar-color: #c0c0c0 transparent; /* Track color */
+
+    /* WebKit Scrollbar (Chrome, Edge, Safari) */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.5);
+    }
+    // when toggle open and close
+    &.open {
+      width: 211px !important;
+    }
+
+    &.close {
+      width: 81px !important;
+    }
+    .ant-skeleton {
+      margin: 80px;
+    }
+
+    .ant-menu-inline {
+      border: none !important;
+    }
+
+    .menu-collapsed {
+      width: 81px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .menu-collapsed .anticon {
+      margin-right: 8px;
+    }
+
+    /* Pseudo-element  (as before) */
+    .menu-collapsed::after {
+      content: "";
+      position: absolute;
+      top: -100%;
+      left: 0;
+      // width: 100%;
+      height: 100%;
+
+      transition: top 0.5s ease-in-out;
+    }
+
+    /* On hover, change background color  */
+    .menu-collapsed:hover {
+      // background-color: #E0EBFF;
+      // transform: scale(0.95); /* Apply scale effect on hover */
+    }
+/* Style selected item */
+.ant-menu{
+  background-color: transparent !important;
+}
+// .ant-menu-inline .ant-menu-item::after{
+//   border-right: none;
+// }
+// .ant-menu-item-selected {
+//   background-color: var(--selected-bg-color) !important;
+//   color: var(--selected-text-color) !important;
+//    border-radius: 12px;
+//   // font-weight: 600;
+//   // margin: 4px 8px;
+// }
+
+// /* Optional: remove hover effects */
+// .ant-menu-item:hover {
+//   background-color: transparent !important;
+//   color: transparent !important;
+// }
+
+    /* River flow effect */
+    .menu-collapsed:hover::after {
+      top: 0%;
+    }
+  }
+
+  .sidebar-footer {
+    position: fixed;
+
+    bottom: 0px;
+
+    width: 250px;
+
+    background-color: white;
+
+    border-top: 1px solid #e3e3e3;
+
+    &.open {
+      width: 256 !important;
+    }
+
+    &.close {
+      width: 80px !important;
+
+      img.footer-logo {
+        display: none;
+      }
+    }
+
+    img.footer-logo {
+      width: 120px;
+
+      padding: 10px;
+    }
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sidemenu {
+    // width: 100% !important;
+    // z-index: 1200;
+    // position: fixed;
+    // left: 0;
+    // top: 0;
+    // height: 100vh;
+    // background: white;
+
+    .intro {
+      width: 210px;
+      height: 60px;
+      padding: 0px;
+      // width: 100% !important;
+      // padding: 10px 16px;
+    
+    }
+   
+
+    .menu-item {
+      width: 100% !important;
+      top: 62px;
+    }
+
+    .sidebar-footer {
+      width: 100% !important;
+    }
+  }
+}