Skip to content

Commit ae0554c

Browse files
puikinshWojakGraclaude
committed
feat(css): add sidebar-without-hover class to disable hover expand on collapsed sidebar (#5837)
Add `sidebar-without-hover` body class that prevents the collapsed mini sidebar from expanding on hover. Wraps all `.app-sidebar:hover` rules inside `:not(.sidebar-without-hover)` so the behavior is opt-in. Includes a new demo page at layout/collapsed-sidebar-without-hover. Co-Authored-By: WojakGra <WojakGra@users.noreply.github.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent b4edb27 commit ae0554c

3 files changed

Lines changed: 171 additions & 45 deletions

File tree

‎src/html/components/dashboard/_sidenav.astro‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
142142
<p>
143143
Layout Options
144144
<span class="nav-badge badge text-bg-secondary me-3"
145-
>6</span
145+
>7</span
146146
>
147147
<i class="nav-arrow bi bi-chevron-right"></i>
148148
</p>
@@ -226,6 +226,18 @@ const deploymentPath = depth === 0 ? './' : '../'.repeat(depth);
226226
<p>Sidebar Mini <small>+ Collapsed</small></p>
227227
</a>
228228
</li>
229+
<li class="nav-item">
230+
<a
231+
href={htmlPath + "/layout/collapsed-sidebar-without-hover.html"}
232+
class:list={[
233+
"nav-link",
234+
page === "collapsed-sidebar-without-hover" && "active",
235+
]}
236+
>
237+
<i class="nav-icon bi bi-circle"></i>
238+
<p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
239+
</a>
240+
</li>
229241
<li class="nav-item">
230242
<a
231243
href={htmlPath + "/layout/logo-switch.html"}

‎src/html/pages/layout/collapsed-sidebar-without-hover.astro‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
import Head from "@components/_head.astro"
3+
import Footer from "@components/dashboard/_footer.astro"
4+
import Topbar from "@components/dashboard/_topbar.astro"
5+
import Sidenav from "@components/dashboard/_sidenav.astro"
6+
import Scripts from "@components/_scripts.astro"
7+
8+
const title = "AdminLTE 4 | Collapsed Sidebar Without Hover"
9+
const path = "../../../dist"
10+
const mainPage = "layout"
11+
const page = "collapsed-sidebar-without-hover";
12+
---
13+
14+
<!DOCTYPE html>
15+
<html lang="en">
16+
<!--begin::Head-->
17+
<head>
18+
<Head title={title} path={path} />
19+
</head>
20+
<!--end::Head-->
21+
<!--begin::Body-->
22+
<body
23+
class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-without-hover sidebar-collapse bg-body-tertiary"
24+
>
25+
<!--begin::App Wrapper-->
26+
<div class="app-wrapper">
27+
<Topbar path={path} />
28+
<Sidenav path={path} mainPage={mainPage} page={page} />
29+
<!--begin::App Main-->
30+
<main class="app-main">
31+
<!--begin::App Content Header-->
32+
<div class="app-content-header">
33+
<!--begin::Container-->
34+
<div class="container-fluid">
35+
<!--begin::Row-->
36+
<div class="row">
37+
<div class="col-sm-6">
38+
<h3 class="mb-0">Collapsed Sidebar Without Hover</h3>
39+
</div>
40+
<div class="col-sm-6">
41+
<ol class="breadcrumb float-sm-end">
42+
<li class="breadcrumb-item"><a href="#">Home</a></li>
43+
<li class="breadcrumb-item active" aria-current="page">
44+
Collapsed Sidebar Without Hover
45+
</li>
46+
</ol>
47+
</div>
48+
</div>
49+
<!--end::Row-->
50+
</div>
51+
<!--end::Container-->
52+
</div>
53+
<!--end::App Content Header-->
54+
<!--begin::App Content-->
55+
<div class="app-content">
56+
<!--begin::Container-->
57+
<div class="container-fluid">
58+
<!--begin::Row-->
59+
<div class="row">
60+
<div class="col-12">
61+
<!-- Default box -->
62+
<div class="card">
63+
<div class="card-header">
64+
<h3 class="card-title">Title</h3>
65+
66+
<div class="card-tools">
67+
<button
68+
type="button"
69+
class="btn btn-tool"
70+
data-lte-toggle="card-collapse"
71+
title="Collapse"
72+
>
73+
<i data-lte-icon="expand" class="bi bi-plus-lg"></i>
74+
<i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
75+
</button>
76+
<button
77+
type="button"
78+
class="btn btn-tool"
79+
data-lte-toggle="card-remove"
80+
title="Remove"
81+
>
82+
<i class="bi bi-x-lg"></i>
83+
</button>
84+
</div>
85+
</div>
86+
<div class="card-body">
87+
Start creating your amazing application!
88+
</div>
89+
<!-- /.card-body -->
90+
<div class="card-footer">Footer</div>
91+
<!-- /.card-footer-->
92+
</div>
93+
<!-- /.card -->
94+
</div>
95+
</div>
96+
<!--end::Row-->
97+
</div>
98+
<!--end::Container-->
99+
</div>
100+
<!--end::App Content-->
101+
</main>
102+
<!--end::App Main-->
103+
<Footer />
104+
</div>
105+
<!--end::App Wrapper-->
106+
<!--begin::Script-->
107+
<Scripts path={path} />
108+
<!--end::Script-->
109+
</body><!--end::Body-->
110+
</html>

‎src/scss/_app-sidebar.scss‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -404,55 +404,59 @@
404404
animation-fill-mode: both;
405405
}
406406

407-
.app-sidebar:hover {
408-
min-width: var(--#{$lte-prefix}sidebar-width);
409-
max-width: var(--#{$lte-prefix}sidebar-width);
407+
&:not(.sidebar-without-hover) {
408+
.app-sidebar:hover {
409+
min-width: var(--#{$lte-prefix}sidebar-width);
410+
max-width: var(--#{$lte-prefix}sidebar-width);
410411

411-
.sidebar-menu .nav-header {
412-
display: inline;
413-
}
412+
.sidebar-menu .nav-header {
413+
display: inline;
414+
}
414415

415-
.sidebar-menu .nav-link {
416-
width: auto;
417-
}
416+
.sidebar-menu .nav-link {
417+
width: auto;
418+
}
418419

419-
.sidebar-menu .nav-link p,
420-
.brand-text,
421-
.logo-xl {
422-
width: auto;
423-
margin-left: 0;
424-
visibility: visible;
425-
animation-name: fadeIn;
426-
animation-duration: $lte-transition-speed;
427-
animation-fill-mode: both;
428-
}
420+
.sidebar-menu .nav-link p,
421+
.brand-text,
422+
.logo-xl {
423+
width: auto;
424+
margin-left: 0;
425+
visibility: visible;
426+
animation-name: fadeIn;
427+
animation-duration: $lte-transition-speed;
428+
animation-fill-mode: both;
429+
}
429430

430-
.brand-text {
431-
display: inline;
432-
max-width: inherit;
433-
margin-left: .5rem;
434-
animation-name: fadeIn;
435-
animation-duration: $lte-transition-speed;
436-
animation-fill-mode: both;
437-
}
438-
.nav-badge,
439-
.nav-arrow {
440-
display: inline-block;
441-
visibility: visible;
442-
animation-name: fadeIn;
443-
animation-duration: $lte-transition-speed;
444-
animation-fill-mode: both;
445-
animation-delay: $lte-transition-speed;
446-
}
431+
.brand-text {
432+
display: inline;
433+
max-width: inherit;
434+
margin-left: .5rem;
435+
animation-name: fadeIn;
436+
animation-duration: $lte-transition-speed;
437+
animation-fill-mode: both;
438+
}
447439

448-
.nav-link p {
449-
padding-left: .5rem;
450-
}
451-
.logo-xs {
452-
visibility: hidden;
453-
animation-name: fadeOut;
454-
animation-duration: $lte-transition-speed;
455-
animation-fill-mode: both;
440+
.nav-badge,
441+
.nav-arrow {
442+
display: inline-block;
443+
visibility: visible;
444+
animation-name: fadeIn;
445+
animation-duration: $lte-transition-speed;
446+
animation-fill-mode: both;
447+
animation-delay: $lte-transition-speed;
448+
}
449+
450+
.nav-link p {
451+
padding-left: .5rem;
452+
}
453+
454+
.logo-xs {
455+
visibility: hidden;
456+
animation-name: fadeOut;
457+
animation-duration: $lte-transition-speed;
458+
animation-fill-mode: both;
459+
}
456460
}
457461
}
458462
}

0 commit comments

Comments
 (0)