removed gulp and implement cli and astro
This commit is contained in:
Daniel
12
src/html/components/dashboard/_footer.astro
Normal file
12
src/html/components/dashboard/_footer.astro
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
const year = new Date().getFullYear()
|
||||
---
|
||||
<!-- Main Footer -->
|
||||
<footer class="app-footer">
|
||||
<!-- To the end -->
|
||||
<div class="float-end d-none d-sm-inline">
|
||||
Anything you want
|
||||
</div>
|
||||
<!-- Default to the start -->
|
||||
<strong>Copyright © 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
278
src/html/components/dashboard/_sidenav.astro
Normal file
278
src/html/components/dashboard/_sidenav.astro
Normal file
@@ -0,0 +1,278 @@
|
||||
---
|
||||
const { path, mainPage, page } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
const htmlPath = (path != undefined) ? '.' : '..'
|
||||
---
|
||||
<!-- Sidebar Container -->
|
||||
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
||||
<div class="sidebar-brand">
|
||||
<a href={htmlPath + '/index.html'} class="brand-link">
|
||||
<img src={distPath + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
|
||||
<span class="brand-text fw-light">AdminLTE 4</span>
|
||||
</a>
|
||||
<a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
<!-- Sidebar Menu -->
|
||||
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
|
||||
<li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-gauge-high"></i>
|
||||
<p>
|
||||
Dashboard
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Dashboard v3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-box-open"></i>
|
||||
<p>
|
||||
Widgets
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Small Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>info Box</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Cards</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<span class="badge text-bg-primary float-end me-3">6</span>
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Unfixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Sidebar Mini</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Layout RTL</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-tree"></i>
|
||||
<p>
|
||||
UI Elements
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Timeline</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-pen-to-square"></i>
|
||||
<p>
|
||||
Forms
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>General Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
|
||||
<a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-table"></i>
|
||||
<p>
|
||||
Tables
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Simple Tables</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">EXAMPLES</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
|
||||
<p>
|
||||
Login & Register
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/examples/login.html'} class="nav-link ">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Login v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/examples/register.html'} class="nav-link ">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Register v1</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" 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>
|
||||
Level 1
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>Level 2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle"></i>
|
||||
<p>
|
||||
Level 2
|
||||
<i class="nav-arrow fa-solid fa-angle-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-dot-circle"></i>
|
||||
<p>Level 3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" 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="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-circle"></i>
|
||||
<p>Level 1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">LABELS</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-danger"></i>
|
||||
<p class="text">Important</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-warning"></i>
|
||||
<p>Warning</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-circle text-info"></i>
|
||||
<p>Informational</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</aside>
|
||||
202
src/html/components/dashboard/_topbar.astro
Normal file
202
src/html/components/dashboard/_topbar.astro
Normal file
@@ -0,0 +1,202 @@
|
||||
---
|
||||
const { path } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
---
|
||||
<!-- 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-full" 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>
|
||||
<li class="nav-item dropdown">
|
||||
<button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
|
||||
<span class="theme-icon-active">
|
||||
<i class="my-1"></i>
|
||||
</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
|
||||
<i class="fa-regular fa-sun me-2"></i>
|
||||
Light
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
|
||||
<i class="fa-solid fa-moon me-2"></i>
|
||||
Dark
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
|
||||
<i class="fa-solid fa-circle-half-stroke me-2"></i>
|
||||
Auto
|
||||
<i class="fa-solid fa-check ms-auto d-none"></i>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- TODO tackel in v4.1 -->
|
||||
<!-- <li class="nav-item">
|
||||
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
|
||||
<i class="fa-solid fa-expand-arrows-alt"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
|
||||
<i class="fa-solid fa-th-large"></i>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
Reference in New Issue
Block a user