github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

sidebar mini bug and logo-switch added

pull/5130/head
Daniel 2 years ago
parent
f38748e5ab
commit
cfd8454b1a
8 changed files with 267 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/AdminLTEFullLogo.png
  2. 1
      src/html/pages/docs/layout.astro
  3. 83
      src/html/pages/layout/collapsed-sidebar.astro
  4. 96
      src/html/pages/layout/logo-switch.astro
  5. 2
      src/html/pages/layout/sidebar-mini.astro
  6. 92
      src/scss/_app-sidebar.scss
  7. 4
      src/scss/mixins/_animations.scss
  8. 19
      src/ts/push-menu.ts

BIN
src/assets/img/AdminLTEFullLogo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

1
src/html/pages/docs/layout.astro
Unescape View File

@ -59,6 +59,7 @@ const page = "layout";
<p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
<ul>
<li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
<li>Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.</li>
<li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
</ul>
</div>

83
src/html/pages/layout/collapsed-sidebar.astro
Unescape View File

@ -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'
---
<!DOCTYPE html>
<html lang="en">
<head>
<Head title={title} path={path} />
</head>
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
<div class="app-wrapper">
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h3 class="mb-0">Collapsed Sidebar</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Collapsed Sidebar</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<i class="fa-solid fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
<i class="fa-solid fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</main>
<!-- /.app-content -->
<Footer />
</div>
<!-- ./app-wrapper -->
<Scripts path={path} />
</body>
</html>

96
src/html/pages/layout/logo-switch.astro
Unescape View File

@ -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)
---
<!DOCTYPE html>
<html lang="en">
<head>
<Head title={title} path={path} />
</head>
<body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
<div class="app-wrapper">
<Topbar path={path} />
<!-- Sidebar Container -->
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<div class="sidebar-brand">
<a href={htmlPath + '/index.html'} class="brand-link logo-switch">
<img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
<img src={path + '/assets/img/AdminLTEFullLogo.png'} alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
</a>
</div>
<!-- Sidebar -->
<div class="sidebar-wrapper">
<nav class="mt-2">
</nav>
</div>
<aside/>
<!-- Main content -->
<main class="app-main">
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h3 class="mb-0">Logo Switch</h3>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Logo Switch</li>
</ol>
</div>
</div>
</div>
</div>
<!-- Main content -->
<div class="app-content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
<i class="fa-solid fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
<i class="fa-solid fa-times"></i>
</button>
</div>
</div>
<div class="card-body">
Start creating your amazing application!
</div>
<!-- /.card-body -->
<div class="card-footer">
Footer
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</main>
<!-- /.app-content -->
<Footer />
</div>
<!-- ./app-wrapper -->
<Scripts path={path} />
</body>
</html>

2
src/html/pages/layout/sidebar-mini.astro
Unescape View File

@ -15,7 +15,7 @@ const page = 'sidebar-mini'
<head>
<Head title={title} path={path} />
</head>
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
<body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
<div class="app-wrapper">
<Topbar path={path} />
<Sidenav path={path} mainPage={mainPage} page={page} />

92
src/scss/_app-sidebar.scss
Unescape View File

@ -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 {

4
src/scss/mixins/_animations.scss
Unescape View File

@ -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;
}
}

19
src/ts/push-menu.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save