From d3af35d5fee9c5c569767a271e1ee936a774fa56 Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Tue, 20 Dec 2022 16:06:00 +0100
Subject: [PATCH] Animated collapse arrow

---
 index.html |   6 +--
 style.scss | 118 +++++++++++++++++++++++++++++------------------------
 2 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/index.html b/index.html
index 93bfac4..faffd3c 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/style.scss b/style.scss
index bf6124e..d429d41 100644
--- a/style.scss
+++ b/style.scss
@@ -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,68 +62,77 @@ nav.main {
         &:first-of-type {
             border-top: 1px solid $border-color;
         }
-    }
-
-    li > a {
-        display: block;
-        padding: 15px 0;
-        text-decoration: none;
-        color: $text-color;
-        &:hover {
-            background-color: rgba($text-color, 0.03);
+        > a {
+            display: block;
+            padding: 15px 0;
+            text-decoration: none;
+            color: $text-color;
+            &:hover {
+                background-color: rgba($text-color, 0.03);
+            }
         }
     }
 
-    // level 0: main items
     ul {
         list-style-type: none;
         padding: 0;
         margin: 0;
-        > li {
-            a.icon {
-                position: relative;
-                padding-left: $icon-width;
-                display: flex;
-                align-items: center;
+    }
 
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: $icon-width;
-                    height: 100%;
-                    background-position: center center;
-                    background-size: 22px 22px;
-                    background-repeat: no-repeat;
-                }
+    // level 0: main items
+    > ul > li {
+        a.icon {
+            position: relative;
+            padding-left: $icon-width;
+            display: flex;
+            align-items: center;
 
-                &.icon-dashboard::before {
-                    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");
-                }
+            // main icons
+            &::before {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: $icon-width;
+                height: 100%;
+                background-position: center center;
+                background-size: 22px 22px;
+                background-repeat: no-repeat;
+                filter: opacity(69%); // make icons transparent (black -> grayish)
+            }
+
+            &.icon-dashboard::before {
+                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 {
-                    content: "";
-                    margin-left: auto;
-                    width: 18px;
-                    height: 18px;
-                    display: block;
-                    background-repeat: no-repeat;
-                    background-image: url("/img/menu-icons/menu-arrow.svg");
+                    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);
     }
-
-    @include variable-left-border-connector($subnav-indent * 1);
 }