sidebar mini bug and logo-switch added
This commit is contained in:
Daniel
@@ -59,6 +59,7 @@ const page = "layout";
|
||||
<p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
|
||||
<ul>
|
||||
<li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
|
||||
<li>Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.</li>
|
||||
<li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
83
src/html/pages/layout/collapsed-sidebar.astro
Normal file
83
src/html/pages/layout/collapsed-sidebar.astro
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Sidenav from '@components/dashboard/_sidenav.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
|
||||
const title = 'AdminLTE 4 | Sidebar Mini'
|
||||
const path = '../../../dist'
|
||||
const mainPage = 'layout'
|
||||
const page = 'collapsed-sidebar'
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse 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">Collapsed Sidebar</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Collapsed Sidebar</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
</body>
|
||||
</html>
|
||||
96
src/html/pages/layout/logo-switch.astro
Normal file
96
src/html/pages/layout/logo-switch.astro
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
import Head from '@components/_head.astro';
|
||||
import Footer from '@components/dashboard/_footer.astro';
|
||||
import Topbar from '@components/dashboard/_topbar.astro';
|
||||
import Scripts from '@components/_scripts.astro';
|
||||
import { convertPathToHtml } from '../../../utils/index.js';
|
||||
|
||||
const title = 'AdminLTE 4 | Sidebar Mini'
|
||||
const path = '../../../dist'
|
||||
const htmlPath = convertPathToHtml(path)
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<!-- 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 logo-switch">
|
||||
<img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
|
||||
<img src={path + '/assets/img/AdminLTEFullLogo.png'} alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
|
||||
</a>
|
||||
</div>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
<aside/>
|
||||
<!-- 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">Logo Switch</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Logo Switch</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<!-- Default box -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Title</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
|
||||
<i class="fa-solid fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
|
||||
<i class="fa-solid fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
Start creating your amazing application!
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
Footer
|
||||
</div>
|
||||
<!-- /.card-footer-->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,7 +15,7 @@ const page = 'sidebar-mini'
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
|
||||
<body class="layout-fixed sidebar-expand-lg sidebar-mini bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
|
||||
Reference in New Issue
Block a user