menu selected style moved to styles jsx

src/components/Menu/index.tsx

@@ -40,7 +40,37 @@ export const Menu: React.FC<IMenuProps> = props => {
     }, [isMobile])
 
     return (
-        <menu className="main-menu HMenu" data-toggle-width="1024">
+        <menu className="main-menu HMenu">
+            <style jsx>{`
+                .selected {
+                    font-weight: bold;
+                    border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
+                }
+
+                .selected.blue {
+                    border-top-color: var(--blue-color);
+                }
+
+                .selected.orange {
+                    border-top-color: var(--orange-color);
+                }
+
+                .selected.green {
+                    border-top-color: var(--green-color);
+                }
+
+                .selected.yellow {
+                    border-top-color: var(--yellow-color);
+                }
+
+                .selected.pink {
+                    border-top-color: var(--pink-color);
+                }
+
+                .selected.red {
+                    border-top-color: var(--red-color);
+                }
+            `}</style>
             {!isMobile ? null : (
                 <MenuToggle
                     open={open}

src/style/components/main-menu.scss

@@ -24,34 +24,7 @@
         }
     }
 
-    .selected {
-        font-weight: bold;
-        border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
-
-        &.blue {
-            border-top: var(--menu-colored-mark-thickness) solid var(--blue-color);
-        }
-
-        &.orange {
-            border-top: var(--menu-colored-mark-thickness) solid var(--orange-color);
-        }
-
-        &.green {
-            border-top: var(--menu-colored-mark-thickness) solid var(--green-color);
-        }
-
-        &.yellow {
-            border-top: var(--menu-colored-mark-thickness) solid var(--yellow-color);
-        }
-
-        &.pink {
-            border-top: var(--menu-colored-mark-thickness) solid var(--pink-color);
-        }
-
-        &.red {
-            border-top: var(--menu-colored-mark-thickness) solid var(--red-color);
-        }
-    }
+    
 }
 
 @media (max-width: var(--mobile-width)) {