github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix rotaion of right and update small-box

pull/3698/head
Daniel 2021-05-15 23:35:14 +05:30
parent 1a51c3dc9c
commit a84c1ee098
6 changed files with 89 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@ -63,15 +63,63 @@
<nav class="mt-2">
<!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-th"></i>
<i class="nav-icon fas fa-circle"></i>
<p>
Simple Link
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v1
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v2
</p>
</a>
</li>
</ul>
</li>
<li class="nav-item menu-open">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
<p>
Forms
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="./pages/forms/general.html" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>
General Elements
</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>
Level 2
</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
@ -108,14 +156,6 @@
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
</p>
</a>
</li>
</ul>
</nav>
</div>
@ -145,7 +185,7 @@
<div class="row">
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-primary rounded-3 shadow-sm text-light">
<div class="small-box bg-primary text-light">
<div class="inner">
<h3>150</h3>
@ -160,7 +200,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-success rounded-3 shadow-sm text-light">
<div class="small-box bg-success text-light">
<div class="inner">
<h3>53<sup class="fs-5">%</sup></h3>
@ -175,7 +215,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-warning rounded-3 shadow-sm text-light">
<div class="small-box bg-warning text-light">
<div class="inner">
<h3>44</h3>
@ -190,7 +230,7 @@
<!-- ./col -->
<div class="col-lg-3 col-6">
<!-- small box -->
<div class="small-box bg-danger rounded-3 shadow-sm text-light">
<div class="small-box bg-danger text-light">
<div class="inner">
<h3>65</h3>

29
scss/_nav-sidebar.scss
View File

@ -1,5 +1,22 @@
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-item {
width: 100%;
> .nav-link {
margin-bottom: .2rem;
.right {
@include transition(transform $transition-fn $transition-speed);
}
}
&:not(.menu-open) .nav-treeview {
display: none;
}
}
// All levels
.nav-link > .right,
.nav-link > p > .right {
@ -35,11 +52,13 @@
padding: 0;
}
.nav-item {
width: 100%;
&:not(.menu-open) .nav-treeview {
display: none;
.menu-open,
.menu-is-opening {
> .nav-link {
svg.right,
i.right {
@include rotate(-90deg);
}
}
}
}

2
scss/_sidebar.scss
View File

@ -1,5 +1,5 @@
.sidebar {
min-height: 100%;
// min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: $sidebar-padding-y;

3
scss/_small-box.scss
View File

@ -3,6 +3,9 @@
//
.small-box {
@include border-radius($border-radius);
@include box-shadow($card-shadow);
display: block;
margin-bottom: 1.25rem;
position: relative;

6
scss/mixins/_miscellaneous.scss
View File

@ -16,9 +16,9 @@
// #{$property}: calc(#{$expression});
// }
// @mixin rotate($value) {
// transform: rotate($value);
// }
@mixin rotate($value) {
transform: rotate($value);
}
// @mixin animation($animation) {
// animation: $animation;

3
ts/treeview.ts
View File

@ -16,6 +16,7 @@ import {
*/
const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_MENU_IS_OPEN = 'menu-is-open'
const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_DATA_TOGGLE = '[data-widget="treeview"]'
@ -33,6 +34,7 @@ const Defaults = {
class Treeview {
open(navItem: Element | null, childNavItem: HTMLElement | null | undefined): void {
navItem?.classList.add(CLASS_NAME_MENU_OPEN)
navItem?.classList.add(CLASS_NAME_MENU_IS_OPEN)
const height: number = childNavItem?.scrollHeight ?? 0
@ -51,6 +53,7 @@ class Treeview {
}
close(navItem: Element, childNavItem: HTMLElement | null | undefined): void {
navItem.classList.remove(CLASS_NAME_MENU_IS_OPEN)
const height: number = childNavItem?.scrollHeight ?? 0
childNavItem?.style.setProperty('overflow', 'hidden')