mirror of https://github.com/ColorlibHQ/AdminLTE
Daniel
2 years ago
parent
445879c1ea
commit
9e426399e1
@ -0,0 +1,105 @@
|
|||||||
|
The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!--begin::Sidebar-->
|
||||||
|
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
||||||
|
<!--begin::Sidebar Brand-->
|
||||||
|
<div class="sidebar-brand">
|
||||||
|
<!--begin::Brand Link-->
|
||||||
|
<a href="./index.html" class="brand-link">
|
||||||
|
<!--begin::Brand Image-->
|
||||||
|
<img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
|
||||||
|
<!--end::Brand Image-->
|
||||||
|
<!--begin::Brand Text-->
|
||||||
|
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||||
|
<!--end::Brand Text-->
|
||||||
|
</a>
|
||||||
|
<!--end::Brand Link-->
|
||||||
|
</div>
|
||||||
|
<!--end::Sidebar Brand-->
|
||||||
|
<!--begin::Sidebar Wrapper-->
|
||||||
|
<div class="sidebar-wrapper">
|
||||||
|
<nav class="mt-2">
|
||||||
|
<!--begin::Sidebar Menu-->
|
||||||
|
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
|
||||||
|
<li class="nav-header">Nav Header</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link">
|
||||||
|
<i class="nav-icon fa-solid fa-circle"></i>
|
||||||
|
<p>Level 1</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="javascript:;" class="nav-link">
|
||||||
|
<i class="nav-icon fa-solid fa-circle"></i>
|
||||||
|
<p>
|
||||||
|
Treeview
|
||||||
|
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<ul class="nav nav-treeview">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link">
|
||||||
|
<i class="nav-icon fa-regular fa-circle"></i>
|
||||||
|
<p>Level 2 (Badge) <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span></p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link">
|
||||||
|
<i class="nav-icon fa-regular fa-circle"></i>
|
||||||
|
<p>Level 2</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link active">
|
||||||
|
<i class="nav-icon fa-solid fa-circle"></i>
|
||||||
|
<p>Level 1 Active</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="nav-item menu-open">
|
||||||
|
<a href="javascript:;" class="nav-link active">
|
||||||
|
<i class="nav-icon fa-solid fa-circle"></i>
|
||||||
|
<p>
|
||||||
|
Treeview Menu Open
|
||||||
|
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<ul class="nav nav-treeview">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link active">
|
||||||
|
<i class="nav-icon fa-regular fa-circle"></i>
|
||||||
|
<p>Level 2 Active</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a href="./index.html" class="nav-link">
|
||||||
|
<i class="nav-icon fa-regular fa-circle"></i>
|
||||||
|
<p>Level 2</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!--end::Sidebar Menu-->
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<!--end::Sidebar Wrapper-->
|
||||||
|
</aside>
|
||||||
|
<!--end::Sidebar-->
|
||||||
|
```
|
||||||
|
|
||||||
|
## Alternate Logo
|
||||||
|
|
||||||
|
You can use two logo images instead of logo with text, you only need to change the markup to this:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="sidebar-brand">
|
||||||
|
<a href="./index.html" class="brand-link logo-switch">
|
||||||
|
<img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
|
||||||
|
<img src="./assets/img/AdminLTEFullLogo.png" alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
---
|
||||||
|
import Head from "@components/_head.astro";
|
||||||
|
import Footer from "@components/dashboard/_footer.astro";
|
||||||
|
import Topbar from "@components/dashboard/_topbar.astro";
|
||||||
|
import MainSidebar from "@components/docs/components/main-sidebar.mdx";
|
||||||
|
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||||
|
import Scripts from "@components/_scripts.astro";
|
||||||
|
const title = "Main Sidebar Component | AdminLTE 4";
|
||||||
|
const path = '../../../../dist'
|
||||||
|
const mainPage = "components";
|
||||||
|
const page = "main-sidebar";
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<Head title={title} path={path} />
|
||||||
|
</head>
|
||||||
|
<body class="layout-fixed sidebar-expand-lg 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">Main Sidebar Component</h3>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<ol class="breadcrumb float-sm-end">
|
||||||
|
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
||||||
|
<li class="breadcrumb-item active" aria-current="page">
|
||||||
|
Main Sidebar Component
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Main content -->
|
||||||
|
<div class="app-content">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<MainSidebar />
|
||||||
|
</div>
|
||||||
|
<!-- /.container-fluid -->
|
||||||
|
</div>
|
||||||
|
<!-- /.content -->
|
||||||
|
</main>
|
||||||
|
<!-- /.app-content -->
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
<!-- ./app-wrapper -->
|
||||||
|
|
||||||
|
<Scripts path={path} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue