mirror of https://github.com/ColorlibHQ/AdminLTE
main-header docs
Daniel
parent
a2bd1e6912
commit
9712bfff74
|
|
@ -191,23 +191,40 @@ const htmlPath = convertPathToHtml(path)
|
|||
|
||||
<li class="nav-header">DOCUMENTATIONS</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/index.html'} class:list={['nav-link', mainPage === 'introduction' && 'active']}>
|
||||
<a href={htmlPath + '/docs/index.html'} class:list={['nav-link', page === 'introduction' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-download"></i>
|
||||
<p>Installation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', mainPage === 'browser-support' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-edge"></i>
|
||||
<p>Browser Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', mainPage === 'color-mode' && 'active']}>
|
||||
<a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-star-half-stroke"></i>
|
||||
<p>Color Mode</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'components' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'components' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-swatchbook"></i>
|
||||
<p>
|
||||
Components
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/components/main-header.html'} class:list={['nav-link', page === 'main-header' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Main Header</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', page === 'browser-support' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-edge"></i>
|
||||
<p>Browser Support</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
```html
|
||||
<!-- Navbar -->
|
||||
<nav class="app-header navbar navbar-expand bg-body">
|
||||
<div class="container-fluid">
|
||||
<!-- Start navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- End navbar links -->
|
||||
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<!-- Navbar Search -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-comments"></i>
|
||||
<span class="navbar-badge badge text-bg-danger">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">Call me whenever you can...</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">I got your message bro</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">The subject goes here</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
<span class="navbar-badge badge text-bg-warning">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
|
||||
<span class="float-end text-secondary fs-7">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-users me-2"></i> 8 friend requests
|
||||
<span class="float-end text-secondary fs-7">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-file me-2"></i> 3 new reports
|
||||
<span class="float-end text-secondary fs-7">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown user-menu">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
|
||||
<span class="d-none d-md-inline">Alexander Pierce</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<!-- User image -->
|
||||
<li class="user-header text-bg-primary">
|
||||
<img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
|
||||
|
||||
<p>
|
||||
Alexander Pierce - Web Developer
|
||||
<small>Member since Nov. 2023</small>
|
||||
</p>
|
||||
</li>
|
||||
<!-- Menu Body -->
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Followers</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Sales</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Friends</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<!-- Menu Footer-->
|
||||
<li class="user-footer">
|
||||
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
||||
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
```
|
||||
|
|
@ -7,8 +7,8 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
|
|||
import Scripts from "@components/_scripts.astro";
|
||||
const title = "Browser Support | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "browser-support";
|
||||
const page = "docs";
|
||||
const mainPage = "docs";
|
||||
const page = "browser-support";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,8 @@ import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
|
|||
import ToggleScript from "@components/docs/color-mode/toggle-script.md";
|
||||
const title = "Color Mode | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "color-mode";
|
||||
const page = "docs";
|
||||
const mainPage = "docs";
|
||||
const page = "color-mode";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,232 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import MainHeader1 from "@components/docs/components/main-header-1.md";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
const title = "Main Header Component | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "components";
|
||||
const page = "main-header";
|
||||
const distPath = path
|
||||
---
|
||||
|
||||
<!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 Header 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 Header Component
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="callout callout-warning mb-4">
|
||||
<h5 class="fw-bold">Reminder!</h5>
|
||||
<p>
|
||||
AdminLTE uses all of Bootstrap 5 components. It's a good start to review the [Bootstrap documentation](https://getbootstrap.com/) to get an idea of the various components that this documentation <b>does not</b> cover.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="callout callout-info mb-4">
|
||||
<h5 class="fw-bold">Tips!</h5>
|
||||
<p>
|
||||
If you go through the example pages and would like to copy a component, right-click on the component and choose “inspect element” to get to the HTML quicker than scanning the HTML page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand bg-body">
|
||||
<div class="container-fluid">
|
||||
<!-- Start navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-md-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- End navbar links -->
|
||||
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<!-- Navbar Search -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<i class="fa-solid fa-search"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-comments"></i>
|
||||
<span class="navbar-badge badge text-bg-danger">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">Call me whenever you can...</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">I got your message bro</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0">
|
||||
<img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="fs-7">The subject goes here</p>
|
||||
<p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-regular fa-bell"></i>
|
||||
<span class="navbar-badge badge text-bg-warning">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
|
||||
<span class="float-end text-secondary fs-7">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-users me-2"></i> 8 friend requests
|
||||
<span class="float-end text-secondary fs-7">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fa-solid fa-file me-2"></i> 3 new reports
|
||||
<span class="float-end text-secondary fs-7">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown user-menu">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
|
||||
<span class="d-none d-md-inline">Alexander Pierce</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<!-- User image -->
|
||||
<li class="user-header text-bg-primary">
|
||||
<img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
|
||||
|
||||
<p>
|
||||
Alexander Pierce - Web Developer
|
||||
<small>Member since Nov. 2023</small>
|
||||
</p>
|
||||
</li>
|
||||
<!-- Menu Body -->
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Followers</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Sales</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a href="#">Friends</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<!-- Menu Footer-->
|
||||
<li class="user-footer">
|
||||
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
||||
<a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
|
||||
<MainHeader1 />
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,8 +7,8 @@ import Scripts from "@components/_scripts.astro";
|
|||
import Introduction from "@components/docs/introduction/index.md";
|
||||
const title = "Introduction | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "introduction";
|
||||
const page = "docs";
|
||||
const mainPage = "docs";
|
||||
const page = "introduction";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue