Skip to content

Commit c77e90d

Browse files
puikinshpuikinsh
committed
Fixed sidebar on mobile
1 parent c66f95a commit c77e90d

57 files changed

Lines changed: 819 additions & 1569 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dist-modern/analytics.html‎

Lines changed: 10 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
<script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
2828
<script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
2929
<script type="module" crossorigin src="./assets/vendor-ui-CflGdlft.js"></script>
30-
<script type="module" crossorigin src="./assets/main-DwHigVru.js"></script>
30+
<script type="module" crossorigin src="./assets/main-bDXl1YJh.js"></script>
3131
<script type="module" crossorigin src="./assets/analytics-Baa0JPJM.js"></script>
32-
<link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
32+
<link rel="stylesheet" crossorigin href="./assets/main-CFKPan32.css">
3333
</head>
3434

3535
<body data-page="analytics" class="analytics-page">
@@ -47,6 +47,11 @@
4747
<h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
4848
</a>
4949

50+
<!-- Sidebar Toggle -->
51+
<button class="hamburger-menu" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
52+
<i class="bi bi-list"></i>
53+
</button>
54+
5055
<!-- Search Bar with Alpine.js -->
5156
<div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
5257
<div class="position-relative">
@@ -304,14 +309,8 @@ <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
304309
</div>
305310
</aside>
306311

307-
<!-- Floating Hamburger Menu -->
308-
<button class="hamburger-menu"
309-
type="button"
310-
data-sidebar-toggle
311-
aria-label="Toggle sidebar">
312-
<i class="bi bi-list"></i>
313-
</button>
314-
312+
<!-- Sidebar Backdrop (mobile overlay) -->
313+
<div class="sidebar-backdrop" aria-hidden="true"></div>
315314
<!-- Main Content -->
316315
<main class="admin-main">
317316
<div class="container-fluid p-4 p-lg-5">
@@ -780,7 +779,7 @@ <h5 class="card-title mb-0">Browser Distribution</h5>
780779
<p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
781780
</div>
782781
<div class="col-md-6 text-md-end">
783-
<p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
782+
<p class="mb-0 text-muted">Built with Bootstrap 5.3.8</p>
784783
</div>
785784
</div>
786785
</div>
@@ -793,35 +792,5 @@ <h5 class="card-title mb-0">Browser Distribution</h5>
793792

794793
<!-- Main App Script -->
795794

796-
<script>
797-
document.addEventListener('DOMContentLoaded', () => {
798-
const toggleButton = document.querySelector('[data-sidebar-toggle]');
799-
const wrapper = document.getElementById('admin-wrapper');
800-
801-
if (toggleButton && wrapper) {
802-
// Set initial state from localStorage
803-
const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
804-
if (isCollapsed) {
805-
wrapper.classList.add('sidebar-collapsed');
806-
toggleButton.classList.add('is-active');
807-
}
808-
809-
// Attach click listener
810-
toggleButton.addEventListener('click', () => {
811-
const isCurrentlyCollapsed = wrapper.classList.contains('sidebar-collapsed');
812-
813-
if (isCurrentlyCollapsed) {
814-
wrapper.classList.remove('sidebar-collapsed');
815-
toggleButton.classList.remove('is-active');
816-
localStorage.setItem('sidebar-collapsed', 'false');
817-
} else {
818-
wrapper.classList.add('sidebar-collapsed');
819-
toggleButton.classList.add('is-active');
820-
localStorage.setItem('sidebar-collapsed', 'true');
821-
}
822-
});
823-
}
824-
});
825-
</script>
826795
</body>
827796
</html>

dist-modern/assets/main-QD_VOj1Y.css renamed to dist-modern/assets/main-CFKPan32.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist-modern/assets/main-DwHigVru.js‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎dist-modern/assets/main-bDXl1YJh.js‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist-modern/calendar.html‎

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@
2121
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
2222
<script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
2323
<script type="module" crossorigin src="./assets/vendor-ui-CflGdlft.js"></script>
24-
<script type="module" crossorigin src="./assets/main-DwHigVru.js"></script>
24+
<script type="module" crossorigin src="./assets/main-bDXl1YJh.js"></script>
2525
<script type="module" crossorigin src="./assets/calendar-BwMBVGZW.js"></script>
26-
<link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
26+
<link rel="stylesheet" crossorigin href="./assets/main-CFKPan32.css">
2727
</head>
2828

2929
<body data-page="calendar" class="calendar-page">
@@ -41,6 +41,11 @@
4141
<h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
4242
</a>
4343

44+
<!-- Sidebar Toggle -->
45+
<button class="hamburger-menu" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
46+
<i class="bi bi-list"></i>
47+
</button>
48+
4449
<!-- Search Bar with Alpine.js -->
4550
<div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
4651
<div class="position-relative">
@@ -298,14 +303,8 @@ <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
298303
</div>
299304
</aside>
300305

301-
<!-- Floating Hamburger Menu -->
302-
<button class="hamburger-menu"
303-
type="button"
304-
data-sidebar-toggle
305-
aria-label="Toggle sidebar">
306-
<i class="bi bi-list"></i>
307-
</button>
308-
306+
<!-- Sidebar Backdrop (mobile overlay) -->
307+
<div class="sidebar-backdrop" aria-hidden="true"></div>
309308
<!-- Main Content -->
310309
<main class="admin-main">
311310
<div class="container-fluid p-4 p-lg-4">
@@ -843,7 +842,7 @@ <h6 class="alert-heading">
843842
<p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
844843
</div>
845844
<div class="col-md-6 text-md-end">
846-
<p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
845+
<p class="mb-0 text-muted">Built with Bootstrap 5.3.8</p>
847846
</div>
848847
</div>
849848
</div>
@@ -855,34 +854,5 @@ <h6 class="alert-heading">
855854
<!-- Page-specific Component -->
856855

857856
<!-- Main App Script -->
858-
859-
<script>
860-
document.addEventListener('DOMContentLoaded', () => {
861-
const toggleButton = document.querySelector('[data-sidebar-toggle]');
862-
const wrapper = document.getElementById('admin-wrapper');
863-
864-
if (toggleButton && wrapper) {
865-
const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
866-
if (isCollapsed) {
867-
wrapper.classList.add('sidebar-collapsed');
868-
toggleButton.classList.add('is-active');
869-
}
870-
871-
toggleButton.addEventListener('click', () => {
872-
const isCurrentlyCollapsed = wrapper.classList.contains('sidebar-collapsed');
873-
874-
if (isCurrentlyCollapsed) {
875-
wrapper.classList.remove('sidebar-collapsed');
876-
toggleButton.classList.remove('is-active');
877-
localStorage.setItem('sidebar-collapsed', 'false');
878-
} else {
879-
wrapper.classList.add('sidebar-collapsed');
880-
toggleButton.classList.add('is-active');
881-
localStorage.setItem('sidebar-collapsed', 'true');
882-
}
883-
});
884-
}
885-
});
886-
</script>
887857
</body>
888858
</html>

‎dist-modern/elements-alerts.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474
<script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
7575
<script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
7676
<script type="module" crossorigin src="./assets/vendor-ui-CflGdlft.js"></script>
77-
<script type="module" crossorigin src="./assets/main-DwHigVru.js"></script>
78-
<link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
77+
<script type="module" crossorigin src="./assets/main-bDXl1YJh.js"></script>
78+
<link rel="stylesheet" crossorigin href="./assets/main-CFKPan32.css">
7979
</head>
8080

8181
<body data-page="elements" class="elements-page">
@@ -91,6 +91,11 @@
9191
<h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
9292
</a>
9393

94+
<!-- Sidebar Toggle -->
95+
<button class="hamburger-menu" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
96+
<i class="bi bi-list"></i>
97+
</button>
98+
9499
<div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
95100
<div class="position-relative">
96101
<input type="search" class="form-control" placeholder="Search..." x-model="query" @input="search()" data-search-input>
@@ -278,11 +283,8 @@ <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
278283
</div>
279284
</aside>
280285

281-
<!-- Floating Hamburger Menu -->
282-
<button class="hamburger-menu" data-sidebar-toggle>
283-
<i class="bi bi-list"></i>
284-
</button>
285-
286+
<!-- Sidebar Backdrop (mobile overlay) -->
287+
<div class="sidebar-backdrop" aria-hidden="true"></div>
286288
<!-- Main Content -->
287289
<main class="admin-main">
288290
<div class="container-fluid p-4">
@@ -535,7 +537,7 @@ <h5 class="card-title mb-0">Live Alert Examples</h5>
535537
<p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
536538
</div>
537539
<div class="col-md-6 text-md-end">
538-
<p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
540+
<p class="mb-0 text-muted">Built with Bootstrap 5.3.8</p>
539541
</div>
540542
</div>
541543
</div>
@@ -604,16 +606,6 @@ <h5 class="card-title mb-0">Live Alert Examples</h5>
604606
Prism.highlightAll();
605607
}
606608
}
607-
608-
// Sidebar toggle
609-
document.addEventListener('DOMContentLoaded', () => {
610-
const toggleButton = document.querySelector('[data-sidebar-toggle]');
611-
const wrapper = document.getElementById('admin-wrapper');
612-
613-
if (toggleButton && wrapper) {
614-
toggleButton.addEventListener('click', () => {
615-
wrapper.classList.toggle('sidebar-collapsed');
616-
});
617609
}
618610

619611
// Apply syntax highlighting

‎dist-modern/elements-badges.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474
<script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
7575
<script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
7676
<script type="module" crossorigin src="./assets/vendor-ui-CflGdlft.js"></script>
77-
<script type="module" crossorigin src="./assets/main-DwHigVru.js"></script>
78-
<link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
77+
<script type="module" crossorigin src="./assets/main-bDXl1YJh.js"></script>
78+
<link rel="stylesheet" crossorigin href="./assets/main-CFKPan32.css">
7979
</head>
8080

8181
<body data-page="elements" class="elements-page">
@@ -91,6 +91,11 @@
9191
<h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
9292
</a>
9393

94+
<!-- Sidebar Toggle -->
95+
<button class="hamburger-menu" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
96+
<i class="bi bi-list"></i>
97+
</button>
98+
9499
<div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
95100
<div class="position-relative">
96101
<input type="search" class="form-control" placeholder="Search..." x-model="query" @input="search()" data-search-input>
@@ -278,11 +283,8 @@ <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
278283
</div>
279284
</aside>
280285

281-
<!-- Floating Hamburger Menu -->
282-
<button class="hamburger-menu" data-sidebar-toggle>
283-
<i class="bi bi-list"></i>
284-
</button>
285-
286+
<!-- Sidebar Backdrop (mobile overlay) -->
287+
<div class="sidebar-backdrop" aria-hidden="true"></div>
286288
<!-- Main Content -->
287289
<main class="admin-main">
288290
<div class="container-fluid p-4">
@@ -524,7 +526,7 @@ <h6>Example heading <span class="badge bg-secondary">New</span></h6>
524526
<p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
525527
</div>
526528
<div class="col-md-6 text-md-end">
527-
<p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
529+
<p class="mb-0 text-muted">Built with Bootstrap 5.3.8</p>
528530
</div>
529531
</div>
530532
</div>
@@ -570,16 +572,6 @@ <h6>Example heading <span class="badge bg-secondary">New</span></h6>
570572
Prism.highlightAll();
571573
}
572574
}
573-
574-
// Sidebar toggle
575-
document.addEventListener('DOMContentLoaded', () => {
576-
const toggleButton = document.querySelector('[data-sidebar-toggle]');
577-
const wrapper = document.getElementById('admin-wrapper');
578-
579-
if (toggleButton && wrapper) {
580-
toggleButton.addEventListener('click', () => {
581-
wrapper.classList.toggle('sidebar-collapsed');
582-
});
583575
}
584576

585577
// Apply syntax highlighting

‎dist-modern/elements-buttons.html‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,8 @@
7474
<script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
7575
<script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
7676
<script type="module" crossorigin src="./assets/vendor-ui-CflGdlft.js"></script>
77-
<script type="module" crossorigin src="./assets/main-DwHigVru.js"></script>
78-
<link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
77+
<script type="module" crossorigin src="./assets/main-bDXl1YJh.js"></script>
78+
<link rel="stylesheet" crossorigin href="./assets/main-CFKPan32.css">
7979
</head>
8080

8181
<body data-page="elements" class="elements-page">
@@ -91,6 +91,11 @@
9191
<h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
9292
</a>
9393

94+
<!-- Sidebar Toggle -->
95+
<button class="hamburger-menu" type="button" data-sidebar-toggle aria-label="Toggle sidebar">
96+
<i class="bi bi-list"></i>
97+
</button>
98+
9499
<div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
95100
<div class="position-relative">
96101
<input type="search" class="form-control" placeholder="Search..." x-model="query" @input="search()" data-search-input>
@@ -278,11 +283,8 @@ <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
278283
</div>
279284
</aside>
280285

281-
<!-- Floating Hamburger Menu -->
282-
<button class="hamburger-menu" data-sidebar-toggle>
283-
<i class="bi bi-list"></i>
284-
</button>
285-
286+
<!-- Sidebar Backdrop (mobile overlay) -->
287+
<div class="sidebar-backdrop" aria-hidden="true"></div>
286288
<!-- Main Content -->
287289
<main class="admin-main">
288290
<div class="container-fluid p-4">
@@ -542,7 +544,7 @@ <h5 class="card-title mb-0">Icon Buttons</h5>
542544
<p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
543545
</div>
544546
<div class="col-md-6 text-md-end">
545-
<p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
547+
<p class="mb-0 text-muted">Built with Bootstrap 5.3.8</p>
546548
</div>
547549
</div>
548550
</div>
@@ -589,16 +591,6 @@ <h5 class="card-title mb-0">Icon Buttons</h5>
589591
Prism.highlightAll();
590592
}
591593
}
592-
593-
// Sidebar toggle
594-
document.addEventListener('DOMContentLoaded', () => {
595-
const toggleButton = document.querySelector('[data-sidebar-toggle]');
596-
const wrapper = document.getElementById('admin-wrapper');
597-
598-
if (toggleButton && wrapper) {
599-
toggleButton.addEventListener('click', () => {
600-
wrapper.classList.toggle('sidebar-collapsed');
601-
});
602594
}
603595

604596
// Apply syntax highlighting

0 commit comments

Comments
 (0)