From cfd8454b1a85ecd4f8ed2850c41513f2148c189c Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sat, 20 May 2023 13:24:51 +0530 Subject: [PATCH] sidebar mini bug and logo-switch added --- src/assets/img/AdminLTEFullLogo.png | Bin 0 -> 3009 bytes src/html/pages/docs/layout.astro | 1 + src/html/pages/layout/collapsed-sidebar.astro | 83 +++++++++++++++ src/html/pages/layout/logo-switch.astro | 96 ++++++++++++++++++ src/html/pages/layout/sidebar-mini.astro | 2 +- src/scss/_app-sidebar.scss | 92 +++++++++++++++-- src/scss/mixins/_animations.scss | 4 - src/ts/push-menu.ts | 19 +--- 8 files changed, 267 insertions(+), 30 deletions(-) create mode 100644 src/assets/img/AdminLTEFullLogo.png create mode 100644 src/html/pages/layout/collapsed-sidebar.astro create mode 100644 src/html/pages/layout/logo-switch.astro diff --git a/src/assets/img/AdminLTEFullLogo.png b/src/assets/img/AdminLTEFullLogo.png new file mode 100644 index 0000000000000000000000000000000000000000..99a098c0f4c950d3683c4ce2556c3caf844aebb2 GIT binary patch literal 3009 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 aQU&=>_Uq)HxNo%ZQ|;#DMQd;f%lIG5N)6Ef literal 0 HcmV?d00001 diff --git a/src/html/pages/docs/layout.astro b/src/html/pages/docs/layout.astro index 13682096b..7ceb5b49c 100644 --- a/src/html/pages/docs/layout.astro +++ b/src/html/pages/docs/layout.astro @@ -59,6 +59,7 @@ const page = "layout";

AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.

  • Fixed Sidebar: use the class .layout-fixed to get a fixed sidebar.
    • +
  • Mini Sidebar on Toggle: use the class .sidebar-expand-* .sidebar-mini to have a collapsed sidebar upon loading.
  • Collapsed Sidebar: use the class .sidebar-expand-* .sidebar-mini .sidebar-collapse to have a collapsed sidebar upon loading.
diff --git a/src/html/pages/layout/collapsed-sidebar.astro b/src/html/pages/layout/collapsed-sidebar.astro new file mode 100644 index 000000000..f7f5c0541 --- /dev/null +++ b/src/html/pages/layout/collapsed-sidebar.astro @@ -0,0 +1,83 @@ +--- +import Head from '@components/_head.astro'; +import Footer from '@components/dashboard/_footer.astro'; +import Topbar from '@components/dashboard/_topbar.astro'; +import Sidenav from '@components/dashboard/_sidenav.astro'; +import Scripts from '@components/_scripts.astro'; + +const title = 'AdminLTE 4 | Sidebar Mini' +const path = '../../../dist' +const mainPage = 'layout' +const page = 'collapsed-sidebar' +--- + + + + + + +
+ + + +
+
+
+
+
+

Collapsed Sidebar

+
+
+
    +
  1. Home
    2. +
  2. Collapsed Sidebar
    3. +
+
+
+
+
+ +
+
+
+
+ +
+
+

Title

+ +
+ + +
+
+
+ Start creating your amazing application! +
+ +
+ Footer +
+ +
+ +
+
+ +
+
+ +
+ + +
+
+ + + + + diff --git a/src/html/pages/layout/logo-switch.astro b/src/html/pages/layout/logo-switch.astro new file mode 100644 index 000000000..261fd2963 --- /dev/null +++ b/src/html/pages/layout/logo-switch.astro @@ -0,0 +1,96 @@ +--- +import Head from '@components/_head.astro'; +import Footer from '@components/dashboard/_footer.astro'; +import Topbar from '@components/dashboard/_topbar.astro'; +import Scripts from '@components/_scripts.astro'; +import { convertPathToHtml } from '../../../utils/index.js'; + +const title = 'AdminLTE 4 | Sidebar Mini' +const path = '../../../dist' +const htmlPath = convertPathToHtml(path) +--- + + + + + + +
+ + +
+ + + + + diff --git a/src/html/pages/layout/sidebar-mini.astro b/src/html/pages/layout/sidebar-mini.astro index f998388ff..29a092958 100644 --- a/src/html/pages/layout/sidebar-mini.astro +++ b/src/html/pages/layout/sidebar-mini.astro @@ -15,7 +15,7 @@ const page = 'sidebar-mini' - +
diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss index 306fb2f4c..42b5d1887 100644 --- a/src/scss/_app-sidebar.scss +++ b/src/scss/_app-sidebar.scss @@ -45,6 +45,24 @@ margin-left: .8rem; line-height: .8; } + + .brand-image-xs { + float: left; + width: auto; + max-height: 33px; + margin-top: -.1rem; + line-height: .8; + } + + .brand-image-xl { + width: auto; + max-height: 40px; + line-height: .8; + + &.single { + margin-top: -.3rem; + } + } } .brand-text { @@ -223,6 +241,42 @@ white-space: nowrap; } +// Logo style +.logo-xs, +.logo-xl { + position: absolute; + visibility: visible; + opacity: 1; + + &.brand-image-xs { + top: 12px; + left: 18px; + } + + &.brand-image-xl { + top: 6px; + left: 12px; + } +} + +.logo-xs { + visibility: hidden; + opacity: 0; + + &.brand-image-xl { + top: 8px; + left: 16px; + } +} + +.brand-link { + &.logo-switch { + &::before { + content: "\00a0"; + } + } +} + .sidebar-mini.sidebar-collapse { .app-sidebar { min-width: $lte-sidebar-mini-width; @@ -246,17 +300,25 @@ } .sidebar-menu .nav-link p, - .brand-text { + .brand-text, + .logo-xl { visibility: hidden; animation-name: fadeOut; + animation-duration: $lte-transition-speed; animation-fill-mode: both; } - &.sidebar-is-hover { - .app-sidebar { - min-width: var(--#{$lte-prefix}sidebar-width); - max-width: var(--#{$lte-prefix}sidebar-width); - } + .logo-xs { + display: inline-block; + visibility: visible; + animation-name: fadeIn; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + } + + .app-sidebar:hover { + min-width: var(--#{$lte-prefix}sidebar-width); + max-width: var(--#{$lte-prefix}sidebar-width); .sidebar-menu .nav-header { display: inline-block; @@ -267,13 +329,21 @@ } .sidebar-menu .nav-link p, - .brand-text { + .brand-text, + .logo-xl { margin-left: 0; visibility: visible; animation-name: fadeIn; animation-duration: $lte-transition-speed; animation-fill-mode: both; } + + .logo-xs { + visibility: hidden; + animation-name: fadeOut; + animation-duration: $lte-transition-speed; + animation-fill-mode: both; + } } } @@ -368,6 +438,7 @@ z-index: $lte-zindex-sidebar-overlay; width: 100%; height: 100%; + visibility: visible; background-color: rgba(0, 0, 0, .2); animation-name: fadeIn; animation-fill-mode: both; @@ -378,6 +449,13 @@ } } +.sidebar-menu .nav-link p, +.app-sidebar .brand-text, +.app-sidebar .logo-xs, +.app-sidebar .logo-xl { + @include transition(margin-left $lte-transition-speed linear, opacity $lte-transition-speed ease, visibility $lte-transition-speed ease); +} + // To prevent onload transition and animation .app-loaded { &.sidebar-mini.sidebar-collapse { diff --git a/src/scss/mixins/_animations.scss b/src/scss/mixins/_animations.scss index 65dbb07b8..6ace4c640 100644 --- a/src/scss/mixins/_animations.scss +++ b/src/scss/mixins/_animations.scss @@ -32,24 +32,20 @@ @keyframes fadeIn { from { - visibility: hidden; opacity: 0; } to { - visibility: visible; opacity: 1; } } @keyframes fadeOut { from { - visibility: visible; opacity: 1; } to { - visibility: hidden; opacity: 0; } } diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts index e146285e6..492bab579 100644 --- a/src/ts/push-menu.ts +++ b/src/ts/push-menu.ts @@ -24,13 +24,11 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}` const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini' const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse' const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open' -const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover' const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand' const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay' const CLASS_NAME_MENU_OPEN = 'menu-open' const SELECTOR_APP_SIDEBAR = '.app-sidebar' -const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper' const SELECTOR_SIDEBAR_MENU = '.sidebar-menu' const SELECTOR_NAV_ITEM = '.nav-item' const SELECTOR_NAV_TREEVIEW = '.nav-treeview' @@ -97,20 +95,6 @@ class PushMenu { this._element.dispatchEvent(event) } - sidebarHover() { - const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER) - - if (selSidebar) { - selSidebar.addEventListener('mouseover', () => { - document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER) - }) - - selSidebar.addEventListener('mouseout', () => { - document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER) - }) - } - } - addSidebarBreakPoint() { const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? [] const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? '' @@ -125,7 +109,7 @@ class PushMenu { this.expand() } - if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) { + if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) { this.collapse() } } @@ -141,7 +125,6 @@ class PushMenu { init() { this.addSidebarBreakPoint() - this.sidebarHover() } }