Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implement control sidebar #5536

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion src/html/components/_head.astro
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ const cssPath = isRtl ? ".rtl" : "";
/>
<!--end::Fonts-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/overlayscrollbars.min.css" crossorigin="anonymous">
<!--end::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(Bootstrap Icons)-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
Expand Down
2 changes: 1 addition & 1 deletion src/html/components/_scripts.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const adminlteJsUrl = path + "/js/adminlte.js";
---

<!--begin::Third Party Plugin(OverlayScrollbars)-->

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<!--begin::Third Party Plugin(OverlayScrollbars)-->
<!--begin::Third Party Plugin(OverlayScrollbars)-->

<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.8.0/browser/overlayscrollbars.browser.es6.min.js" crossorigin="anonymous"></script>
<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
Expand Down
336 changes: 336 additions & 0 deletions src/html/components/dashboard/_controlsidebar.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<!--begin::ControlSidebar-->
<aside class="control-sidebar control-sidebar-dark" style="top: 56.6667px; height: 1248.33px; display: block;">
<div class="control-sidebar-content p-3">
<h5>
Customize AdminLTE</h5>
<hr class="mb-2">
<div class="mb-4">
<input type="checkbox" value="1" class="mr-1">
<span>
Dark Mode</span>
</div>
<h6>
Header Options</h6>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Fixed</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Dropdown Legacy Offset</span>
</div>
<div class="mb-4">
<input type="checkbox" value="1" class="mr-1">
<span>
No border</span>
</div>
<h6>
Sidebar Options</h6>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Collapsed</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" checked="checked" class="mr-1">
<span>
Fixed</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" checked="checked" class="mr-1">
<span>
Sidebar Mini</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Sidebar Mini MD</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Sidebar Mini XS</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Nav Flat Style</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Nav Legacy Style</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Nav Compact</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Nav Child Indent</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Nav Child Hide on Collapse</span>
</div>
<div class="mb-4">
<input type="checkbox" value="1" class="mr-1">
<span>
Disable Hover/Focus Auto-Expand</span>
</div>
<h6>
Footer Options</h6>
<div class="mb-4">
<input type="checkbox" value="1" class="mr-1">
<span>
Fixed</span>
</div>
<h6>
Small Text Options</h6>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Body</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Navbar</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Brand</span>
</div>
<div class="mb-1">
<input type="checkbox" value="1" class="mr-1">
<span>
Sidebar Nav</span>
</div>
<div class="mb-4">
<input type="checkbox" value="1" class="mr-1">
<span>
Footer</span>
</div>
<h6>
Navbar Variants</h6>
<div class="d-flex">
<select class="form-select mb-3 text-light border-0 bg-white">
<option class="bg-primary">
Primary</option>
<option class="bg-secondary">
Secondary</option>
<option class="bg-info">
Info</option>
<option class="bg-success">
Success</option>
<option class="bg-danger">
Danger</option>
<option class="bg-indigo">
Indigo</option>
<option class="bg-purple">
Purple</option>
<option class="bg-pink">
Pink</option>
<option class="bg-navy">
Navy</option>
<option class="bg-lightblue">
Lightblue</option>
<option class="bg-teal">
Teal</option>
<option class="bg-cyan">
Cyan</option>
<option class="bg-dark">
Dark</option>
<option class="bg-gray-dark">
Gray dark</option>
<option class="bg-gray">
Gray</option>
<option class="bg-light">
Light</option>
<option class="bg-warning">
Warning</option>
<option class="bg-white">
White</option>
<option class="bg-orange">
Orange</option>
</select>
</div>
<h6>
Accent Color Variants</h6>
<div class="d-flex">
</div>
<select class="form-select mb-3 border-0">
<option>
None Selected</option>
<option class="bg-primary">
Primary</option>
<option class="bg-warning">
Warning</option>
<option class="bg-info">
Info</option>
<option class="bg-danger">
Danger</option>
<option class="bg-success">
Success</option>
<option class="bg-indigo">
Indigo</option>
<option class="bg-lightblue">
Lightblue</option>
<option class="bg-navy">
Navy</option>
<option class="bg-purple">
Purple</option>
<option class="bg-fuchsia">
Fuchsia</option>
<option class="bg-pink">
Pink</option>
<option class="bg-maroon">
Maroon</option>
<option class="bg-orange">
Orange</option>
<option class="bg-lime">
Lime</option>
<option class="bg-teal">
Teal</option>
<option class="bg-olive">
Olive</option>
</select>
<h6>
Dark Sidebar Variants</h6>
<div class="d-flex">
</div>
<select class="form-select mb-3 text-light border-0 bg-primary">
<option>
None Selected</option>
<option class="bg-primary">
Primary</option>
<option class="bg-warning">
Warning</option>
<option class="bg-info">
Info</option>
<option class="bg-danger">
Danger</option>
<option class="bg-success">
Success</option>
<option class="bg-indigo">
Indigo</option>
<option class="bg-lightblue">
Lightblue</option>
<option class="bg-navy">
Navy</option>
<option class="bg-purple">
Purple</option>
<option class="bg-fuchsia">
Fuchsia</option>
<option class="bg-pink">
Pink</option>
<option class="bg-maroon">
Maroon</option>
<option class="bg-orange">
Orange</option>
<option class="bg-lime">
Lime</option>
<option class="bg-teal">
Teal</option>
<option class="bg-olive">
Olive</option>
</select>
<h6>
Light Sidebar Variants</h6>
<div class="d-flex">
</div>
<select class="form-select mb-3 border-0">
<option>
None Selected</option>
<option class="bg-primary">
Primary</option>
<option class="bg-warning">
Warning</option>
<option class="bg-info">
Info</option>
<option class="bg-danger">
Danger</option>
<option class="bg-success">
Success</option>
<option class="bg-indigo">
Indigo</option>
<option class="bg-lightblue">
Lightblue</option>
<option class="bg-navy">
Navy</option>
<option class="bg-purple">
Purple</option>
<option class="bg-fuchsia">
Fuchsia</option>
<option class="bg-pink">
Pink</option>
<option class="bg-maroon">
Maroon</option>
<option class="bg-orange">
Orange</option>
<option class="bg-lime">
Lime</option>
<option class="bg-teal">
Teal</option>
<option class="bg-olive">
Olive</option>
</select>
<h6>
Brand Logo Variants</h6>
<div class="d-flex">
</div>
<select class="form-select mb-3 border-0">
<option>
None Selected</option>
<option class="bg-primary">
Primary</option>
<option class="bg-secondary">
Secondary</option>
<option class="bg-info">
Info</option>
<option class="bg-success">
Success</option>
<option class="bg-danger">
Danger</option>
<option class="bg-indigo">
Indigo</option>
<option class="bg-purple">
Purple</option>
<option class="bg-pink">
Pink</option>
<option class="bg-navy">
Navy</option>
<option class="bg-lightblue">
Lightblue</option>
<option class="bg-teal">
Teal</option>
<option class="bg-cyan">
Cyan</option>
<option class="bg-dark">
Dark</option>
<option class="bg-gray-dark">
Gray dark</option>
<option class="bg-gray">
Gray</option>
<option class="bg-light">
Light</option>
<option class="bg-warning">
Warning</option>
<option class="bg-white">
White</option>
<option class="bg-orange">
Orange</option>
<a href="#">
clear</a>
</select>
</div>
</div>
</div>
</aside>
<!--end::ControlSidebar-->