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

sidebar mini bug and logo-switch added

pull/5130/head
Daniel 2023-05-20 13:24:51 +05:30
parent f38748e5ab
commit cfd8454b1a
8 changed files with 267 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

1
src/html/pages/docs/layout.astro
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 Normal file
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 Normal file
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
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
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
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
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()
}
}