From cdd76789c6940ffdd38414d8c8cc3b941d74c339 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 15 Oct 2019 05:28:12 +0300
Subject: [PATCH] menu selected style moved to styles jsx

---
 src/components/Menu/index.tsx       | 32 ++++++++++++++++++++++++++++-
 src/style/components/main-menu.scss | 29 +-------------------------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 3c7acc4d..dcb4b66a 100644
--- a/src/components/Menu/index.tsx
+++ b/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}
diff --git a/src/style/components/main-menu.scss b/src/style/components/main-menu.scss
index b2e6468f..f3344f02 100644
--- a/src/style/components/main-menu.scss
+++ b/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)) {