From f2465225069811c13fd413d230fab10fa143e954 Mon Sep 17 00:00:00 2001
From: Bjorn Zschernack <dergoldbroiler@gmail.com>
Date: Fri, 3 Nov 2023 16:26:01 +0100
Subject: [PATCH] update on menu

---
 images/icons/aufbereitung_icon.svg | 19 +++++++
 scss/includes/_menu.scss           | 84 +++++++++++++++++++++++++-----
 scss/styles.css                    | 41 +++++++++++++--
 3 files changed, 127 insertions(+), 17 deletions(-)
 create mode 100644 images/icons/aufbereitung_icon.svg

diff --git a/images/icons/aufbereitung_icon.svg b/images/icons/aufbereitung_icon.svg
new file mode 100644
index 0000000..b8e2d08
--- /dev/null
+++ b/images/icons/aufbereitung_icon.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.191" height="28.936" viewBox="0 0 31.191 28.936">
+    <defs>
+        <clipPath id="g05kmhd9sa">
+            <path data-name="Rechteck 591" style="fill:#ea612e" d="M0 0h31.191v28.936H0z"/>
+        </clipPath>
+    </defs>
+    <g data-name="Gruppe 1074" style="clip-path:url(#g05kmhd9sa)">
+        <path data-name="Pfad 835" d="M243.886 441.12a.581.581 0 0 1-.32-.1l-4.96-3.251a1.755 1.755 0 0 1 1.924-2.935l4.305 2.822a.585.585 0 1 1-.641.978l-4.305-2.822a.585.585 0 0 0-.641.978l4.96 3.251a.585.585 0 0 1-.321 1.074" transform="translate(-228.542 -417.608)" style="fill:#ea612e"/>
+        <path data-name="Pfad 836" d="M384.4 318.116a.582.582 0 0 1-.32-.1l-3.11-2.038a.585.585 0 0 1-.231-.295l-.816-2.312a4.117 4.117 0 0 0-1.616-2.062l-6.313-4.138a.585.585 0 0 0-.641.978l3 1.967a.585.585 0 0 1-.641.978l-3-1.967a1.755 1.755 0 1 1 1.924-2.935l6.313 4.138a5.293 5.293 0 0 1 2.078 2.651l.75 2.126 2.945 1.93a.585.585 0 0 1-.321 1.074" transform="translate(-355.492 -293.981)" style="fill:#ea612e"/>
+        <path data-name="Pfad 837" d="M322.006 567.169a.583.583 0 0 1-.32-.1l-.351-.23-2.249.189a5.287 5.287 0 0 1-3.326-.843l-3.608-2.365a1.365 1.365 0 0 1-.393-1.889 2.144 2.144 0 0 1 2.969-.618l1.664 1.091a.585.585 0 0 1-.641.978l-1.664-1.091a.975.975 0 0 0-1.35.281.2.2 0 0 0 .056.27l3.608 2.365a4.112 4.112 0 0 0 2.587.656l2.45-.206a.585.585 0 0 1 .37.094l.52.341a.585.585 0 0 1-.321 1.074" transform="translate(-299.387 -539.092)" style="fill:#ea612e"/>
+        <path data-name="Pfad 838" d="M243.973 369.439a.582.582 0 0 1-.32-.1l-5.61-3.677a1.755 1.755 0 0 1 1.924-2.935l5.283 3.463a.585.585 0 1 1-.641.978l-5.283-3.463a.585.585 0 1 0-.641.978l5.609 3.677a.585.585 0 0 1-.321 1.074" transform="translate(-228.001 -348.312)" style="fill:#ea612e"/>
+        <path data-name="Pfad 839" d="M300.625 334.848a.582.582 0 0 1-.32-.1L296 331.93a1.755 1.755 0 0 1 1.924-2.935l4.631 3.036a.585.585 0 0 1-.641.978l-4.631-3.036a.585.585 0 1 0-.641.978l4.305 2.822a.585.585 0 0 1-.321 1.074" transform="translate(-283.696 -315.892)" style="fill:#ea612e"/>
+        <path data-name="Pfad 840" d="M172.865 9.028a.585.585 0 0 1-.585-.585 3.349 3.349 0 0 0-3.344-3.343.585.585 0 0 1 0-1.17 3.349 3.349 0 0 0 3.345-3.346.585.585 0 1 1 1.17 0 3.349 3.349 0 0 0 3.349 3.345.585.585 0 0 1 0 1.17 3.349 3.349 0 0 0-3.345 3.345.585.585 0 0 1-.585.585m-1.709-4.515a4.548 4.548 0 0 1 1.709 1.709 4.548 4.548 0 0 1 1.709-1.709 4.548 4.548 0 0 1-1.714-1.714 4.548 4.548 0 0 1-1.709 1.709" transform="translate(-161.787 .001)" style="fill:#ea612e"/>
+        <path data-name="Pfad 841" d="M33.8 294.446a.585.585 0 0 1-.585-.585 2.342 2.342 0 0 0-2.339-2.339.585.585 0 0 1 0-1.17 2.342 2.342 0 0 0 2.339-2.339.585.585 0 1 1 1.17 0 2.342 2.342 0 0 0 2.339 2.339.585.585 0 0 1 0 1.17 2.342 2.342 0 0 0-2.339 2.339.585.585 0 0 1-.585.585m-.986-3.509a3.538 3.538 0 0 1 .986.986 3.537 3.537 0 0 1 .986-.986 3.538 3.538 0 0 1-.986-.986 3.539 3.539 0 0 1-.986.986" transform="translate(-29.111 -276.221)" style="fill:#ea612e"/>
+        <path data-name="Pfad 842" d="M511.566 93.531a.585.585 0 0 1-.585-.585 2.342 2.342 0 0 0-2.339-2.339.585.585 0 1 1 0-1.17 2.342 2.342 0 0 0 2.339-2.339.585.585 0 0 1 1.17 0 2.342 2.342 0 0 0 2.339 2.339.585.585 0 1 1 0 1.17 2.342 2.342 0 0 0-2.339 2.339.585.585 0 0 1-.585.585m-.986-3.509a3.536 3.536 0 0 1 .986.986 3.539 3.539 0 0 1 .986-.986 3.539 3.539 0 0 1-.986-.986 3.536 3.536 0 0 1-.986.986" transform="translate(-488.248 -83.14)" style="fill:#ea612e"/>
+        <path data-name="Pfad 843" d="M170.506 242.182a.585.585 0 0 1-.311-1.08l3.176-1.991a.864.864 0 0 0 0-1.464l-12.022-7.539a3.783 3.783 0 0 0-4 0l-6.869 4.308a.585.585 0 0 1-.621-.991l6.869-4.308a4.931 4.931 0 0 1 5.24 0l12.022 7.539a2.034 2.034 0 0 1 0 3.446l-3.176 1.991a.582.582 0 0 1-.31.089" transform="translate(-143.754 -219.458)" style="fill:#ea612e"/>
+        <path data-name="Pfad 844" d="M15.6 406.472a4.926 4.926 0 0 1-2.62-.754L.953 398.179a2.034 2.034 0 0 1 0-3.446l2.854-1.79a.585.585 0 1 1 .621.991l-2.854 1.79a.864.864 0 0 0 0 1.464l12.026 7.54a3.784 3.784 0 0 0 4 0l.62-.389a.585.585 0 0 1 .621.991l-.62.389a4.926 4.926 0 0 1-2.62.754" transform="translate(0 -377.536)" style="fill:#ea612e"/>
+    </g>
+</svg>
diff --git a/scss/includes/_menu.scss b/scss/includes/_menu.scss
index eeaabf2..0405661 100644
--- a/scss/includes/_menu.scss
+++ b/scss/includes/_menu.scss
@@ -14,33 +14,93 @@
                 font-size: 17px;
                 padding:30px 45px;
                 display: block;
+
+                &:before{
+                    background-repeat: no-repeat;
+                    width: 26px;
+                    height: 26px;
+                    /* vertical-align: sub; */
+                    margin-right: 10px;
+                    line-height: 26px;
+                    vertical-align: middle;
+                    position: relative;
+                    top: 3px;   
+                    content:' ';
+                    display: inline-block;
+                }
             }
 
             &.car {
                 a{
                     &:before{
-                        content:' ';
-                        display: inline-block;
                         background-image: url('../images/icons/fahrzeuge_icon.svg');
-                        background-size: 25.8px 14.9px;
-                        background-repeat: no-repeat;
-                        width: 26px;
-                        height: 26px;
-                        /* vertical-align: sub; */
-                        margin-right: 10px;
-                        line-height: 26px;
-                        vertical-align: middle;
-                        position: relative;
-                        top: 3px;                    
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.service {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/Service_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.felge {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/felge.svg');
+                        background-size: 25.8px 14.9px;               
                     }
                 }
             }
 
+            &.beschichtung {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/fahrzeuge_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.aufbereitung {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/aufbereitung_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+            &.kontakt {
+                a{
+                    &:before{
+                        background-image: url('../images/icons/Kontakt_icon.svg');
+                        background-size: 25.8px 14.9px;               
+                    }
+                }
+            }
+
+
             &.orange {
                 a{
                     border-bottom:8px solid $orange;
                 }
             }
+            &.green {
+                a{
+                    border-bottom:8px solid $green;
+                }
+            }
+            &.red {
+                a{
+                    border-bottom:8px solid $red;
+                }
+            }
+            &.blue {
+                a{
+                    border-bottom:8px solid $blue;
+                }
+            }
             
             
         }
diff --git a/scss/styles.css b/scss/styles.css
index ece0545..37df75e 100644
--- a/scss/styles.css
+++ b/scss/styles.css
@@ -85,11 +85,7 @@ body header .contact .clock:before {
   padding: 30px 45px;
   display: block;
 }
-#menucontainer ul li.car a:before {
-  content: " ";
-  display: inline-block;
-  background-image: url("../images/icons/fahrzeuge_icon.svg");
-  background-size: 25.8px 14.9px;
+#menucontainer ul li a:before {
   background-repeat: no-repeat;
   width: 26px;
   height: 26px;
@@ -99,7 +95,42 @@ body header .contact .clock:before {
   vertical-align: middle;
   position: relative;
   top: 3px;
+  content: " ";
+  display: inline-block;
+}
+#menucontainer ul li.car a:before {
+  background-image: url("../images/icons/fahrzeuge_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.service a:before {
+  background-image: url("../images/icons/Service_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.felge a:before {
+  background-image: url("../images/icons/felge.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.beschichtung a:before {
+  background-image: url("../images/icons/fahrzeuge_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.aufbereitung a:before {
+  background-image: url("../images/icons/aufbereitung_icon.svg");
+  background-size: 25.8px 14.9px;
+}
+#menucontainer ul li.kontakt a:before {
+  background-image: url("../images/icons/Kontakt_icon.svg");
+  background-size: 25.8px 14.9px;
 }
 #menucontainer ul li.orange a {
   border-bottom: 8px solid #e8a422;
+}
+#menucontainer ul li.green a {
+  border-bottom: 8px solid #89b459;
+}
+#menucontainer ul li.red a {
+  border-bottom: 8px solid #ea612e;
+}
+#menucontainer ul li.blue a {
+  border-bottom: 8px solid #245861;
 }
\ No newline at end of file