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>

118
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,68 +62,77 @@ nav.main {
&:first-of-type { &:first-of-type {
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
} > a {
display: block;
li > a { padding: 15px 0;
display: block; text-decoration: none;
padding: 15px 0; color: $text-color;
text-decoration: none; &:hover {
color: $text-color; background-color: rgba($text-color, 0.03);
&:hover { }
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 { }
a.icon {
position: relative;
padding-left: $icon-width;
display: flex;
align-items: center;
&::before { // level 0: main items
content: ""; > ul > li {
position: absolute; a.icon {
top: 0; position: relative;
left: 0; padding-left: $icon-width;
width: $icon-width; display: flex;
height: 100%; align-items: center;
background-position: center center;
background-size: 22px 22px;
background-repeat: no-repeat;
}
&.icon-dashboard::before { // main icons
background-image: url("/img/menu-icons/dashboard.svg"); &::before {
} content: "";
&.icon-machines::before { position: absolute;
background-image: url("/img/menu-icons/machines.svg"); top: 0;
} left: 0;
&.icon-events::before { width: $icon-width;
background-image: url("/img/menu-icons/events.svg"); height: 100%;
} background-position: center center;
&.icon-reports::before { background-size: 22px 22px;
background-image: url("/img/menu-icons/reports.svg"); background-repeat: no-repeat;
} filter: opacity(69%); // make icons transparent (black -> grayish)
&.icon-call-center::before { }
background-image: url("/img/menu-icons/call-center.svg");
} &.icon-dashboard::before {
&.icon-warehouse-management::before { background-image: url("/img/menu-icons/dashboard.svg");
background-image: url("/img/menu-icons/dashboard.svg"); }
} &.icon-machines::before {
background-image: url("/img/menu-icons/machines.svg");
}
&.icon-events::before {
background-image: url("/img/menu-icons/events.svg");
}
&.icon-reports::before {
background-image: url("/img/menu-icons/reports.svg");
}
&.icon-call-center::before {
background-image: url("/img/menu-icons/call-center.svg");
}
&.icon-warehouse-management::before {
background-image: url("/img/menu-icons/dashboard.svg");
}
&::after {
content: "";
margin-left: auto;
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 { &::after {
content: ""; transform: rotate(90deg);
margin-left: auto;
width: 18px;
height: 18px;
display: block;
background-repeat: no-repeat;
background-image: url("/img/menu-icons/menu-arrow.svg");
} }
} }
} }
@ -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);
} }