diff --git a/src/assets/img/AdminLTEFullLogo.png b/src/assets/img/AdminLTEFullLogo.png new file mode 100644 index 000000000..99a098c0f Binary files /dev/null and b/src/assets/img/AdminLTEFullLogo.png differ 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.

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() } }