Readme

style.scss

@@ -17,16 +17,18 @@ $image-path: "/img"; // image path without trailing slash
 $text-color: #1f1f1f;
 $border-color: #cdcdcd;
 $subnav-indent: 10px;
-$icon-width: 50px;
+$icon-width: 60px;
 $level-one-indent: $icon-width;
 $border-img: url("#{$image-path}/border.png");
 $dot-img: url("#{$image-path}/dot.png");
 $expand-arrow-height: 18px;
+$expand-animation-duration: 0.2s;
 
 $border-width: 20px;
 $border-margin-right: 15px;
 
 // menu icons in format "icon class": "svg filename"
+// get font awesome icons from https://fontawesome.com/v5/search
 $menu-icons: (
     "icon-administration": "administration.svg",
     "icon-call-center": "call-center.svg",
@@ -85,8 +87,9 @@ nav.main {
             border-top: 1px solid $border-color;
         }
         > a {
+            font-size: 1rem;
             display: block;
-            padding: 15px 0;
+            line-height: 55px;
             text-decoration: none;
             color: $text-color;
             &:hover {
@@ -114,7 +117,7 @@ nav.main {
                 content: "";
                 position: absolute;
                 top: 0;
-                left: 0;
+                left: -2px;
                 width: $icon-width;
                 height: 100%;
                 background-position: center center;
@@ -130,15 +133,16 @@ nav.main {
                 }
             }
 
+            // menu arrow
             &::after {
                 content: "";
                 margin-left: auto;
                 width: $expand-arrow-height / 2;
                 height: $expand-arrow-height;
-                margin-right: 10px;
+                margin-right: 12px;
                 background-repeat: no-repeat;
                 background-image: url("#{$image-path}/menu-icons/menu-arrow.svg");
-                transition: transform 0.3s;
+                transition: transform $expand-animation-duration;
                 transform-origin: 50% 50%;
             }
             &.collapsable:not(.collapsed) {
@@ -153,6 +157,11 @@ nav.main {
     ul.subnav {
         border-top: 1px solid $border-color;
 
+        &.collapsing {
+            -webkit-transition-duration: $expand-animation-duration;
+            transition-duration: $expand-animation-duration;
+        }
+
         li {
             // reset parent borders
             border-bottom: none;
@@ -181,7 +190,7 @@ nav.main {
                 > a {
                     &::before {
                         background-image: $border-img, $dot-img;
-                        top: 20px; // hardcoded!
+                        top: 22px;
                     }
                 }
             }
@@ -191,7 +200,7 @@ nav.main {
                     &::before {
                         background-image: $border-img, $dot-img;
                         background-position: bottom;
-                        top: -20px; // hardcoded!
+                        top: -24px;
                     }
                 }
             }