From a84c1ee09835bf6c5e52ab7af46ebdcc61ee1478 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Sat, 15 May 2021 23:35:14 +0530 Subject: [PATCH] Fix rotaion of right and update small-box --- index.html | 70 ++++++++++++++++++++++++++------- scss/_nav-sidebar.scss | 29 +++++++++++--- scss/_sidebar.scss | 2 +- scss/_small-box.scss | 3 ++ scss/mixins/_miscellaneous.scss | 6 +-- ts/treeview.ts | 3 ++ 6 files changed, 89 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index 1fcfd5970..3876b7d4e 100644 --- a/index.html +++ b/index.html @@ -63,15 +63,63 @@ @@ -145,7 +185,7 @@
-
+

150

@@ -160,7 +200,7 @@
-
+

53%

@@ -175,7 +215,7 @@
-
+

44

@@ -190,7 +230,7 @@
-
+

65

diff --git a/scss/_nav-sidebar.scss b/scss/_nav-sidebar.scss index 093aaf551..d90c294ff 100644 --- a/scss/_nav-sidebar.scss +++ b/scss/_nav-sidebar.scss @@ -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); + } } } } diff --git a/scss/_sidebar.scss b/scss/_sidebar.scss index dff3a4dd0..956f55b39 100644 --- a/scss/_sidebar.scss +++ b/scss/_sidebar.scss @@ -1,5 +1,5 @@ .sidebar { - min-height: 100%; + // min-height: 100%; overflow-x: hidden; overflow-y: auto; padding-bottom: $sidebar-padding-y; diff --git a/scss/_small-box.scss b/scss/_small-box.scss index 5d2cce636..e2d489b8a 100644 --- a/scss/_small-box.scss +++ b/scss/_small-box.scss @@ -3,6 +3,9 @@ // .small-box { + @include border-radius($border-radius); + @include box-shadow($card-shadow); + display: block; margin-bottom: 1.25rem; position: relative; diff --git a/scss/mixins/_miscellaneous.scss b/scss/mixins/_miscellaneous.scss index 4b96dd837..722230948 100644 --- a/scss/mixins/_miscellaneous.scss +++ b/scss/mixins/_miscellaneous.scss @@ -16,9 +16,9 @@ // #{$property}: calc(#{$expression}); // } -// @mixin rotate($value) { -// transform: rotate($value); -// } +@mixin rotate($value) { + transform: rotate($value); +} // @mixin animation($animation) { // animation: $animation; diff --git a/ts/treeview.ts b/ts/treeview.ts index c5b8d801f..d7d58d001 100644 --- a/ts/treeview.ts +++ b/ts/treeview.ts @@ -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')