compostrap.github.io/sidebar-skeleton.html at master · compostrap/compostrap.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en" data-bs-theme="light">

<head>
	<meta charset="UTF-8">
	<!-- the stored theme before the page is drawn, so a dark page does not flash light -->
	<script>
		try {
			const theme = localStorage.getItem('bootstrap-theme');
			if (theme === 'light' || theme === 'dark') {
				document.documentElement.setAttribute('data-bs-theme', theme);
			}
		} catch (e) { }
	</script>
	<link rel="stylesheet" href="dist/sidebar.css">
	<title>Sidebar</title>
</head>

<body>

<header>
	<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
		<div class="container-fluid">

			<!-- title -->
			<a class="navbar-brand" href="#">Sidebar</a>

			<div class="ms-auto d-flex align-items-center">

				<!-- theme toggle -->
				<button class="btn btn-link nav-link theme-switcher py-2 px-0 px-lg-2 border-0 text-decoration-none" type="button" aria-label="Toggle theme" data-theme-switcher data-theme-light-label="Switch to light" data-theme-dark-label="Switch to dark">
					<span data-theme-switcher-label>Switch to dark</span>
				</button>

				<!-- sidebar toggle -->
				<button class="navbar-toggler btn btn-link border-0 ms-2" type="button" id="sidebar" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
			</div>
		</div>
	</nav>
</header>

<div class="d-flex wrapper wrapper-navbar-used wrapper-navbar-fixed">

	<nav role="navigation" class="sidebar shadow-soft" id="navigation">

		<!-- sidebar -->
		<div class="sidebar-menu">
			<div class="sidebar-menu-fixed"></div>
		</div>
	</nav>

	<div class="container-fluid">

		<!-- content -->
		<main role="main"></main>
	</div>
</div>

<script type="module" src="dist/sidebar-skeleton.js"></script>
</body>
</html>