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

View File

@ -63,15 +63,63 @@
<nav class="mt-2"> <nav class="mt-2">
<!-- Sidebar Menu --> <!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-circle"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active"> <a href="#" class="nav-link active">
<i class="nav-icon fas fa-th"></i> <i class="nav-icon far fa-circle"></i>
<p> <p>
Simple Link Dashboard v1
</p> </p>
</a> </a>
</li> </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-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link"> <a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i> <i class="nav-icon fas fa-circle"></i>
@ -108,14 +156,6 @@
</li> </li>
</ul> </ul>
</li> </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> </ul>
</nav> </nav>
</div> </div>
@ -145,7 +185,7 @@
<div class="row"> <div class="row">
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- 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"> <div class="inner">
<h3>150</h3> <h3>150</h3>
@ -160,7 +200,7 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- 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"> <div class="inner">
<h3>53<sup class="fs-5">%</sup></h3> <h3>53<sup class="fs-5">%</sup></h3>
@ -175,7 +215,7 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- 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"> <div class="inner">
<h3>44</h3> <h3>44</h3>
@ -190,7 +230,7 @@
<!-- ./col --> <!-- ./col -->
<div class="col-lg-3 col-6"> <div class="col-lg-3 col-6">
<!-- small box --> <!-- 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"> <div class="inner">
<h3>65</h3> <h3>65</h3>

View File

@ -1,5 +1,22 @@
// Sidebar navigation menu // Sidebar navigation menu
.nav-sidebar { .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 // All levels
.nav-link > .right, .nav-link > .right,
.nav-link > p > .right { .nav-link > p > .right {
@ -35,11 +52,13 @@
padding: 0; padding: 0;
} }
.nav-item { .menu-open,
width: 100%; .menu-is-opening {
> .nav-link {
&:not(.menu-open) .nav-treeview { svg.right,
display: none; i.right {
@include rotate(-90deg);
}
} }
} }
} }

View File

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

View File

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

View File

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

View File

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