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-reports">Reports</a></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">
Call Center</a>
<ul class="subnav collapse" id="call-center-collapse" data-parent="#tree-root">
@ -35,11 +35,11 @@
</ul>
</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">
Warehouse Management
</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="#">Spare part Warehouse</a>

30
style.scss
View File

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