All other icons

img/menu-icons/administration.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"></path>
+</svg>

img/menu-icons/contract-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 64c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8v-16zm192.81 248H304c8.84 0 16 7.16 16 16s-7.16 16-16 16h-47.19c-16.45 0-31.27-9.14-38.64-23.86-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34a15.986 15.986 0 0 1-14.31 8.84c-.38 0-.75-.02-1.14-.05-6.45-.45-12-4.75-14.03-10.89L144 354.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.77-16.19 54.05-9.7 66 14.16 2.02 4.06 5.96 6.5 10.16 6.5zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"></path>
+</svg>

img/menu-icons/custom-forms.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path fill="currentColor" d="M218.17 424.14c-2.95-5.92-8.09-6.52-10.17-6.52s-7.22.59-10.02 6.19l-7.67 15.34c-6.37 12.78-25.03 11.37-29.48-2.09L144 386.59l-10.61 31.88c-5.89 17.66-22.38 29.53-41 29.53H80c-8.84 0-16-7.16-16-16s7.16-16 16-16h12.39c4.83 0 9.11-3.08 10.64-7.66l18.19-54.64c3.3-9.81 12.44-16.41 22.78-16.41s19.48 6.59 22.77 16.41l13.88 41.64c19.75-16.19 54.06-9.7 66 14.16 1.89 3.78 5.49 5.95 9.36 6.26v-82.12l128-127.09V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24v-40l-128-.11c-16.12-.31-30.58-9.28-37.83-23.75zM384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1zm-96 225.06V416h68.99l161.68-162.78-67.88-67.88L288 346.96zm280.54-179.63l-31.87-31.87c-9.94-9.94-26.07-9.94-36.01 0l-27.25 27.25 67.88 67.88 27.25-27.25c9.95-9.94 9.95-26.07 0-36.01z"></path>
+</svg>

img/menu-icons/evoca-horeca.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 27">
+    <path fill="#c12728" d="M12.62 27C14.9146 19.8387 5.83198 11.5161 11.4728 0C5.06713 0.483871 0 6.29032 0 13.4516C0 20.9032 5.44955 27 12.2376 27C12.3332 27 12.4288 27 12.62 27Z"></path>
+    <path fill="#c12728" d="M13.6257 0C10.5081 9.48387 20.3481 14.7097 14.6974 27C21.0301 26.3226 25.9987 20.6129 25.9987 13.5484C26.0962 6.09677 20.5429 0 13.6257 0Z"></path>
+</svg>

img/menu-icons/fiscal-devices.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path>
+</svg>

img/menu-icons/routes.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.8 178.6">
+    <path d="M30.8,150.2c4.6-5.5,8.7-12.3,10.9-15.9c14.7-23.5,51.6-95.6,78.7-107.5c2.3,4.7,7.2,7.8,12.7,7.8 c3.1,0,6-1,8.3-2.7c1.3,2.9,1.8,6.6,1.6,11.3c-1.3,32.4-23.6,67.7-27.5,101c-1.7,14.6,2,28.3,20.2,28.3c22.8,0,48.4-18.3,68.4-34.2 c1.6,0.6,3.2,0.9,5,0.9c7.9,0,14.3-6.4,14.3-14.3s-6.4-14.3-14.3-14.3c-7.9,0-14.3,6.4-14.3,14.3c0,2.6,0.7,5,1.9,7.1 c-18.2,14.4-41.8,30.9-61,30.9c-19.5,0-8.5-30.6-5.5-40.5c7.2-23.3,21.3-56.1,22.2-78.9c0.3-8-1.2-15.3-5.5-20.3 c0.2-0.9,0.3-1.9,0.3-2.9c0-7.9-6.4-14.3-14.3-14.3c-6.8,0-12.5,4.7-13.9,11.1C82.5,30.3,40.7,123.3,23.4,144.7 c-1.4-0.5-2.9-0.7-4.5-0.7c-7.9,0-14.3,6.4-14.3,14.3c0,7.9,6.4,14.3,14.3,14.3s14.3-6.4,14.3-14.3 C33.2,155.2,32.3,152.5,30.8,150.2z"></path>
+</svg>

img/menu-icons/switch-to-desktop.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path fill="currentColor" d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"></path>
+</svg>

img/menu-icons/switch-to-mobile.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+    <path fill="currentColor" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"></path>
+</svg>

img/menu-icons/tax-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path d="M377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-153 31V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM64 72c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8V72zm0 80v-16c0-4.42 3.58-8 8-8h80c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8H72c-4.42 0-8-3.58-8-8zm144 263.88V440c0 4.42-3.58 8-8 8h-16c-4.42 0-8-3.58-8-8v-24.29c-11.29-.58-22.27-4.52-31.37-11.35-3.9-2.93-4.1-8.77-.57-12.14l11.75-11.21c2.77-2.64 6.89-2.76 10.13-.73 3.87 2.42 8.26 3.72 12.82 3.72h28.11c6.5 0 11.8-5.92 11.8-13.19 0-5.95-3.61-11.19-8.77-12.73l-45-13.5c-18.59-5.58-31.58-23.42-31.58-43.39 0-24.52 19.05-44.44 42.67-45.07V232c0-4.42 3.58-8 8-8h16c4.42 0 8 3.58 8 8v24.29c11.29.58 22.27 4.51 31.37 11.35 3.9 2.93 4.1 8.77.57 12.14l-11.75 11.21c-2.77 2.64-6.89 2.76-10.13.73-3.87-2.43-8.26-3.72-12.82-3.72h-28.11c-6.5 0-11.8 5.92-11.8 13.19 0 5.95 3.61 11.19 8.77 12.73l45 13.5c18.59 5.58 31.58 23.42 31.58 43.39 0 24.53-19.05 44.44-42.67 45.07z"></path>
+</svg>

img/menu-icons/technical-center.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M507.73 109.1c-2.24-9.03-13.54-12.09-20.12-5.51l-74.36 74.36-67.88-11.31-11.31-67.88 74.36-74.36c6.62-6.62 3.43-17.9-5.66-20.16-47.38-11.74-99.55.91-136.58 37.93-39.64 39.64-50.55 97.1-34.05 147.2L18.74 402.76c-24.99 24.99-24.99 65.51 0 90.5 24.99 24.99 65.51 24.99 90.5 0l213.21-213.21c50.12 16.71 107.47 5.68 147.37-34.22 37.07-37.07 49.7-89.32 37.91-136.73zM64 472c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path>
+</svg>

img/menu-icons/warehouse-management.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+    <path d="M560 288h-80v96l-32-21.3-32 21.3v-96h-80c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V304c0-8.8-7.2-16-16-16zm-384-64h224c8.8 0 16-7.2 16-16V16c0-8.8-7.2-16-16-16h-80v96l-32-21.3L256 96V0h-80c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16zm64 64h-80v96l-32-21.3L96 384v-96H16c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h224c8.8 0 16-7.2 16-16V304c0-8.8-7.2-16-16-16z"/>
+</svg>

index.html

@@ -20,7 +20,7 @@
 <body>
     <section class="sidebar">
         <nav class="main">
-            <ul id="tree-root">
+            <ul id="main-nav-tree-root">
                 <li><a href="#" class="icon icon-dashboard">Dashboard</a></li>
                 <li><a href="#" class="icon icon-machines">Machines</a></li>
                 <li><a href="#" class="icon icon-events">Events</a></li>
@@ -29,7 +29,7 @@
                     <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">
+                    <ul class="subnav collapse" id="call-center-collapse" data-parent="#main-nav-tree-root">
                         <li><a href="#">Ticket Stream</a></li>
                         <li><a href="#">Configuration</a></li>
                     </ul>
@@ -39,7 +39,7 @@
                         data-target="#warehouse-management-collapse">
                         Warehouse Management
                     </a>
-                    <ul class="subnav collapse" id="warehouse-management-collapse" data-parent="#tree-root">
+                    <ul class="subnav collapse" id="warehouse-management-collapse" data-parent="#main-nav-tree-root">
                         <li><a href="#">Product Warehouse</a></li>
                         <li>
                             <a href="#">Spare part Warehouse</a>
@@ -69,6 +69,16 @@
                         </li>
                     </ul>
                 </li>
+                <li><a href="#" class="icon icon-routes">Routes</a></li>
+                <li><a href="#" class="icon icon-fiscal-devices">Fiscal Devices</a></li>
+                <li><a href="#" class="icon icon-contract-center">Contract Center</a></li>
+                <li><a href="#" class="icon icon-tax-center">Tax Center</a></li>
+                <li><a href="#" class="icon icon-technical-center">Technical Center</a></li>
+                <li><a href="#" class="icon icon-custom-forms">Custom Forms</a></li>
+                <li><a href="#" class="icon icon-administration">Administration</a></li>
+                <li><a href="#" class="icon icon-switch-to-desktop">Switch To Desktop</a></li>
+                <li><a href="#" class="icon icon-switch-to-mobile">Switch To Mobile</a></li>
+                <li><a href="#" class="icon icon-evoca-horeca">Evoca Horeca</a></li>
             </ul>
         </nav>
     </section>

style.scss

@@ -13,18 +13,40 @@ section.sidebar {
 
 // ----------------------------------------------------------------------------------
 
+$image-path: "/img"; // image path without trailing slash
 $text-color: #1f1f1f;
 $border-color: #cdcdcd;
 $subnav-indent: 10px;
 $icon-width: 50px;
 $level-one-indent: $icon-width;
-$border-img: url("../img/border.png");
+$border-img: url("#{$image-path}/border.png");
-$dot-img: url("../img/dot.png");
+$dot-img: url("#{$image-path}/dot.png");
 $expand-arrow-height: 18px;
 
 $border-width: 20px;
 $border-margin-right: 15px;
 
+// menu icons in format "icon class": "svg filename"
+$menu-icons: (
+    "icon-administration": "administration.svg",
+    "icon-call-center": "call-center.svg",
+    "icon-contract-center": "contract-center.svg",
+    "icon-custom-forms": "custom-forms.svg",
+    "icon-dashboard": "dashboard.svg",
+    "icon-events": "events.svg",
+    "icon-evoca-horeca": "evoca-horeca.svg",
+    "icon-fiscal-devices": "fiscal-devices.svg",
+    "icon-machines": "machines.svg",
+    "icon-menu-arrow": "menu-arrow.svg",
+    "icon-reports": "reports.svg",
+    "icon-routes": "routes.svg",
+    "icon-switch-to-desktop": "switch-to-desktop.svg",
+    "icon-switch-to-mobile": "switch-to-mobile.svg",
+    "icon-tax-center": "tax-center.svg",
+    "icon-technical-center": "technical-center.svg",
+    "icon-warehouse-management": "warehouse-management.svg",
+);
+
 @mixin variable-left-border-connector($indent) {
     :not(:last-of-type) li {
         position: relative;
@@ -101,24 +123,13 @@ nav.main {
                 filter: opacity(69%); // make icons transparent (black -> grayish)
             }
 
-            &.icon-dashboard::before {
+            // define menu icons
-                background-image: url("/img/menu-icons/dashboard.svg");
+            @each $icon-class, $icon-file in $menu-icons {
-            }
+                &.#{$icon-class}::before {
-            &.icon-machines::before {
+                    background-image: url("#{$image-path}/menu-icons/#{$icon-file}");
-                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;
@@ -126,7 +137,7 @@ nav.main {
                 height: $expand-arrow-height;
                 margin-right: 10px;
                 background-repeat: no-repeat;
-                background-image: url("/img/menu-icons/menu-arrow.svg");
+                background-image: url("#{$image-path}/menu-icons/menu-arrow.svg");
                 transition: transform 0.3s;
                 transform-origin: 50% 50%;
             }