adminator-admin-dashboard 2.7.0

package/src/assets/styles/spec/components/sidebar.scss

@@ -0,0 +1,642 @@
+@use '../settings/baseColors' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/clearfix' as *;
+@use '../settings/materialColors' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Sidebar
+// + @Sidebar Inner
+// + @Sidebar Header
+// + @Sidebar Menu
+// + @Sidebar Collapsed
+
+// ---------------------------------------------------------
+// @Sidebar
+// ---------------------------------------------------------
+
+.sidebar {
+  background-color: $default-white;
+  bottom: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: all 0.2s ease;
+  width: $offscreen-size;
+  z-index: 1000;
+
+  ul {
+    list-style-type: none;
+  }
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    width: $collapsed-size;
+
+    .sidebar-inner {
+      .sidebar-logo {
+        border-bottom: 1px solid transparent;
+        padding: 0;
+
+        a {
+          .logo {
+            background-position: center center;
+            width: $collapsed-size;
+          }
+        }
+      }
+
+      .sidebar-menu {
+        overflow-x: hidden;
+
+        > li {
+          > a {
+            .title {
+              display: none;
+            }
+          }
+        }
+
+        li {
+          &.dropdown {
+            .arrow {
+              opacity: 0;
+            }
+
+            &.open {
+              ul.dropdown-menu {
+                display: none !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include to($breakpoint-md) {
+    left: -$offscreen-size;
+    width: calc(#{$offscreen-size} - 30px);
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Inner
+// ---------------------------------------------------------
+
+.sidebar-inner {
+  position: relative;
+  height: 100%;
+}
+
+// ---------------------------------------------------------
+// @Sidebar Header
+// ---------------------------------------------------------
+
+.sidebar-logo {
+  border-bottom: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+  line-height: 0;
+  padding: 0 20px;
+  transition: all 0.2s ease;
+
+  a {
+    display: inline-block;
+    width: 100%;
+
+    .logo {
+      background-position: center left;
+      background-repeat: no-repeat;
+      display: inline-block;
+      min-height: calc(#{$header-height} - 1px);
+      width: 100%;
+      width: 70px;
+      img {
+        height: 42px;
+        width: auto;
+        display: block;
+        margin: 11px auto;
+      }
+    }
+
+    .logo-text {
+      color: $grey-900;
+    }
+  }
+
+  .mobile-toggle {
+    display: none;
+    float: right;
+    font-size: 18px;
+    line-height: calc(#{$header-height} - 1px);
+
+    a {
+      color: $default-text-color;
+    }
+
+    @include to($breakpoint-md) {
+      display: inline-block;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      display: none;
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Menu
+// ---------------------------------------------------------
+
+.sidebar-menu {
+  @include clearfix;
+  border-right: 1px solid $border-color;
+  height: calc(100vh - #{$header-height});
+  list-style: none;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  position: relative;
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .sidebar-link {
+    &.actived::before {
+      background: $md-blue-500;
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: 8px;
+      left: -4px;
+      position: absolute;
+      top: calc(50% - 4px);
+      width: 8px;
+    }
+  }
+
+  li {
+    position: relative;
+
+    &.dropdown {
+      .arrow {
+        font-size: 10px;
+        line-height: 40px;
+        position: absolute;
+        right: 30px;
+        transition: all 0.05s ease-in;
+
+        @include to($breakpoint-md) {
+          right: 25px;
+        }
+      }
+
+      &.open {
+        > a {
+          color: $default-dark;
+
+          .icon-holder {
+            color: $default-info;
+          }
+
+          > .arrow {
+            transform: rotate(90deg);
+          }
+        }
+
+        > .dropdown-menu {
+          display: block;
+
+          .dropdown-menu {
+            padding-left: 20px;
+          }
+
+          .arrow {
+            line-height: 25px;
+          }
+        }
+      }
+    }
+
+    a {
+      color: $default-text-color;
+      transition: all 0.3s ease;
+
+      &:hover,
+      &:focus {
+        color: $default-dark;
+        text-decoration: none;
+
+        .icon-holder {
+          color: $default-info;
+        }
+      }
+    }
+  }
+
+  > li {
+    &.dropdown {
+      ul {
+        &.dropdown-menu {
+          background-color: transparent;
+          border-radius: 0;
+          border: 0;
+          box-shadow: none;
+          float: none;
+          padding-left: 50px;
+          padding-top: 0;
+          position: relative;
+          width: 100%;
+
+          > li {
+            > a {
+              display: block;
+              padding: 10px 15px;
+
+              &:hover,
+              &:focus {
+                background-color: transparent;
+                color: $default-dark;
+              }
+            }
+
+            &.actived {
+              a {
+                color: $default-dark;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > a {
+      display: block;
+      font-size: 15px;
+      font-weight: 500;
+      padding: 5px 15px;
+      position: relative;
+      white-space: nowrap;
+
+      .icon-holder {
+        border-radius: 6px;
+        display: inline-block;
+        font-size: 17px;
+        height: 35px;
+        left: 0;
+        line-height: 35px;
+        margin-right: 14px;
+        position: relative;
+        text-align: center;
+        transition: all 0.3s ease;
+        width: 35px;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Collapsed
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .sidebar {
+    @include from($breakpoint-xl) {
+      width: $collapsed-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid transparent;
+          padding: 0;
+        }
+
+        .sidebar-menu {
+          overflow-x: hidden;
+
+          > li {
+            > a {
+              .title {
+                display: none;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 0;
+              }
+
+              &.open {
+                ul.dropdown-menu {
+                  display: none !important;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &:hover {
+        width: $offscreen-size;
+
+        .sidebar-inner {
+          .sidebar-logo {
+            border-bottom: 1px solid $border-color;
+            padding: 0 20px;
+          }
+
+          .sidebar-menu {
+            > li {
+              > a {
+                .title {
+                  display: inline-block;
+                }
+              }
+            }
+
+            li {
+              &.dropdown {
+                .arrow {
+                  opacity: 1;
+                }
+              }
+
+              &.open {
+                > ul.dropdown-menu {
+                  display: block !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+
+          > a {
+            .logo {
+              background-position: center left;
+              width: 150px;
+            }
+          }
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include to($breakpoint-md) {
+      left: 0;
+    }
+  }
+}
+
+// Dark mode sidebar improvements - proper active states for both themes
+[data-theme="dark"] {
+  .sidebar {
+    background-color: var(--c-bkg-card);
+
+    .sidebar-menu {
+      border-right-color: var(--c-border);
+
+      li {
+        a {
+          color: var(--c-text-base);
+
+          &:hover,
+          &:focus {
+            color: var(--c-text-base);
+            background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
+
+            .icon-holder {
+              color: var(--c-primary);
+              background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
+            }
+          }
+        }
+
+        &.dropdown {
+          &.open {
+            > a {
+              color: var(--c-text-base);
+              background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
+
+              .icon-holder {
+                color: var(--c-primary);
+                background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
+              }
+            }
+          }
+        }
+
+        // Active menu item styling for dark mode - lighter shade approach
+        &.actived {
+          > a {
+            color: var(--c-text-base) !important;
+            background-color: color-mix(in srgb, var(--c-bkg-card) 92%, #ffffff) !important;
+
+            .icon-holder {
+              color: var(--c-text-base) !important;
+              background-color: color-mix(in srgb, var(--c-bkg-card) 85%, #ffffff) !important;
+            }
+          }
+        }
+
+        // Styling for dropdown parent when it has an active child - lighter shade approach
+        &.dropdown.has-active-child {
+          > a {
+            color: var(--c-text-base) !important;
+            background-color: color-mix(in srgb, var(--c-bkg-card) 95%, #ffffff) !important;
+
+            .icon-holder {
+              color: var(--c-text-base) !important;
+              background-color: color-mix(in srgb, var(--c-bkg-card) 90%, #ffffff) !important;
+            }
+          }
+        }
+      }
+
+      // Dropdown menu items
+      > li {
+        &.dropdown {
+          ul.dropdown-menu {
+            > li {
+              > a {
+                color: var(--c-text-muted);
+
+                &:hover,
+                &:focus {
+                  color: var(--c-text-base);
+                  background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
+                }
+              }
+
+              &.actived {
+                a {
+                  color: var(--c-text-base) !important;
+                  background-color: color-mix(in srgb, var(--c-bkg-card) 92%, #ffffff) !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar-logo {
+    border-bottom-color: var(--c-border);
+    border-right-color: var(--c-border);
+
+    a {
+      .logo-text {
+        color: var(--c-text-base);
+      }
+    }
+
+    .mobile-toggle {
+      a {
+        color: var(--c-text-base);
+      }
+    }
+  }
+}
+
+// Light mode active states (ensure proper visibility)
+[data-theme="light"], :root {
+  .sidebar {
+    .sidebar-menu {
+      li {
+        &.actived {
+          > a {
+            background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;
+            color: var(--c-primary) !important;
+
+            .icon-holder {
+              color: var(--c-primary) !important;
+              background-color: color-mix(in srgb, var(--c-primary) 10%, transparent) !important;
+            }
+          }
+        }
+
+        // Styling for dropdown parent when it has an active child (light mode)
+        &.dropdown.has-active-child {
+          > a {
+            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary)) !important;
+            color: var(--c-primary) !important;
+
+            .icon-holder {
+              color: var(--c-primary) !important;
+              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent) !important;
+            }
+          }
+        }
+
+        a {
+          &:hover,
+          &:focus {
+            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));
+            color: var(--c-primary);
+
+            .icon-holder {
+              color: var(--c-primary);
+              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);
+            }
+          }
+        }
+      }
+
+      // Dropdown items for light mode
+      > li {
+        &.dropdown {
+          ul.dropdown-menu {
+            > li {
+              &.actived {
+                a {
+                  color: var(--c-primary) !important;
+                  background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;
+                }
+              }
+
+              > a {
+                &:hover,
+                &:focus {
+                  background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));
+                  color: var(--c-primary);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}