mirror of https://github.com/ColorlibHQ/AdminLTE
Daniel
2 years ago
2 changed files with 164 additions and 0 deletions
@ -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