Intis/sidebar-test-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animated collapse arrow

Browse Source
This commit is contained in:
Eden Kirin
2022-12-20 16:06:00 +01:00
parent 1ac8243f5d
commit d3af35d5fe
2 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -26,7 +26,7 @@
<li><a href="#" class="icon icon-events">Events</a></li> <li><a href="#" class="icon icon-events">Events</a></li>
<li><a href="#" class="icon icon-reports">Reports</a></li> <li><a href="#" class="icon icon-reports">Reports</a></li>
<li> <li>
<a href="#" class="icon icon-call-center collapsed" data-toggle="collapse" <a href="#" class="icon icon-call-center collapsable collapsed" data-toggle="collapse"
data-target="#call-center-collapse"> data-target="#call-center-collapse">
Call Center</a> Call Center</a>
<ul class="subnav collapse" id="call-center-collapse" data-parent="#tree-root"> <ul class="subnav collapse" id="call-center-collapse" data-parent="#tree-root">
@ -35,11 +35,11 @@
</ul> </ul>
</li> </li>
<li> <li>
<a href="#" class="icon icon-warehouse-management" data-toggle="collapse" <a href="#" class="icon icon-warehouse-management collapsable collapsed" data-toggle="collapse"
data-target="#warehouse-management-collapse"> data-target="#warehouse-management-collapse">
Warehouse Management Warehouse Management
</a> </a>
<ul class="subnav collapse show" id="warehouse-management-collapse" data-parent="#tree-root"> <ul class="subnav collapse" id="warehouse-management-collapse" data-parent="#tree-root">
<li><a href="#">Product Warehouse</a></li> <li><a href="#">Product Warehouse</a></li>
<li> <li>
<a href="#">Spare part Warehouse</a> <a href="#">Spare part Warehouse</a>

30
style.scss
View File

@ -20,6 +20,7 @@ $icon-width: 50px;
$level-one-indent: $icon-width; $level-one-indent: $icon-width;
$border-img: url("../img/border.png"); $border-img: url("../img/border.png");
$dot-img: url("../img/dot.png"); $dot-img: url("../img/dot.png");
$expand-arrow-height: 18px;
$border-width: 20px; $border-width: 20px;
$border-margin-right: 15px; $border-margin-right: 15px;
@ -61,9 +62,7 @@ nav.main {
&:first-of-type { &:first-of-type {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
} > a {
li > a {
display: block; display: block;
padding: 15px 0; padding: 15px 0;
text-decoration: none; text-decoration: none;
@ -72,19 +71,23 @@ nav.main {
background-color: rgba($text-color, 0.03); background-color: rgba($text-color, 0.03);
} }
} }
}
// level 0: main items
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
> li { }
// level 0: main items
> ul > li {
a.icon { a.icon {
position: relative; position: relative;
padding-left: $icon-width; padding-left: $icon-width;
display: flex; display: flex;
align-items: center; align-items: center;
// main icons
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -95,6 +98,7 @@ nav.main {
background-position: center center; background-position: center center;
background-size: 22px 22px; background-size: 22px 22px;
background-repeat: no-repeat; background-repeat: no-repeat;
filter: opacity(69%); // make icons transparent (black -> grayish)
} }
&.icon-dashboard::before { &.icon-dashboard::before {
@ -118,11 +122,17 @@ nav.main {
&::after { &::after {
content: ""; content: "";
margin-left: auto; margin-left: auto;
width: 18px; width: $expand-arrow-height / 2;
height: 18px; height: $expand-arrow-height;
display: block; margin-right: 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url("/img/menu-icons/menu-arrow.svg"); background-image: url("/img/menu-icons/menu-arrow.svg");
transition: transform 0.3s;
transform-origin: 50% 50%;
}
&.collapsable:not(.collapsed) {
&::after {
transform: rotate(90deg);
} }
} }
} }
@ -131,6 +141,7 @@ nav.main {
// subnav level 1 // subnav level 1
ul.subnav { ul.subnav {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
li { li {
// reset parent borders // reset parent borders
border-bottom: none; border-bottom: none;
@ -210,7 +221,6 @@ nav.main {
} }
} }
} }
}
@include variable-left-border-connector($subnav-indent * 1); @include variable-left-border-connector($subnav-indent * 1);
} }
}