removed gulp and implement cli and astro
This commit is contained in:
Daniel
30
src/html/components/_head.astro
Normal file
30
src/html/components/_head.astro
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
const { title, path, isRtl } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
const cssPath = isRtl ? '.rtl' : ''
|
||||
---
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="title" content={title}>
|
||||
<meta name="author" content="ColorlibHQ">
|
||||
<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
|
||||
<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
|
||||
|
||||
<!-- OPTIONAL LINKS -->
|
||||
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
|
||||
|
||||
<!-- overlayScrollbars -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
|
||||
|
||||
<!-- REQUIRED LINKS -->
|
||||
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href={distPath + '/css/adminlte' + cssPath + '.css'} >
|
||||
99
src/html/components/_scripts.astro
Normal file
99
src/html/components/_scripts.astro
Normal file
@@ -0,0 +1,99 @@
|
||||
---
|
||||
const { path } = Astro.props
|
||||
const distPath = (path != undefined) ? path : '../../../dist'
|
||||
---
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<!-- overlayScrollbars -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- OPTIONAL SCRIPT For Bootstrap 5 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Bootstrap 5 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- REQUIRED SCRIPTS -->
|
||||
<!-- AdminLTE App -->
|
||||
<script src={distPath + '/js/adminlte.js'}></script>
|
||||
|
||||
<!-- OPTIONAL SCRIPTS -->
|
||||
<script is:inline>
|
||||
const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
|
||||
const Default = {
|
||||
scrollbarTheme: 'os-theme-light',
|
||||
scrollbarAutoHide: 'leave'
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
|
||||
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
|
||||
scrollbars: {
|
||||
theme: Default.scrollbarTheme,
|
||||
autoHide: Default.scrollbarAutoHide,
|
||||
clickScroll: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- DON'T USE THIS IN PRODUCTION -->
|
||||
<script is:inline>
|
||||
// Color Mode Toggler
|
||||
(() => {
|
||||
'use strict'
|
||||
|
||||
const storedTheme = localStorage.getItem('theme')
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
if (storedTheme) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = function (theme) {
|
||||
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
const showActiveTheme = theme => {
|
||||
const activeThemeIcon = document.querySelector('.theme-icon-active i')
|
||||
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
|
||||
const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
|
||||
element.classList.remove('active')
|
||||
})
|
||||
|
||||
btnToActive.classList.add('active')
|
||||
activeThemeIcon.setAttribute('class', svgOfActiveBtn)
|
||||
}
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (storedTheme !== 'light' || storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme())
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
showActiveTheme(getPreferredTheme())
|
||||
|
||||
document.querySelectorAll('[data-bs-theme-value]')
|
||||
.forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const theme = toggle.getAttribute('data-bs-theme-value')
|
||||
localStorage.setItem('theme', theme)
|
||||
setTheme(theme)
|
||||
showActiveTheme(theme)
|
||||
})
|
||||
})
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
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