From 9ca50e87c2473a55311d89151165113b85b1a759 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 15 Oct 2019 05:32:33 +0300
Subject: [PATCH] all menu style moved to jsx

---
 src/components/Menu/index.tsx       | 17 +++++++++++++++
 src/style/components/main-menu.scss | 34 -----------------------------
 src/style/style.scss                |  1 -
 3 files changed, 17 insertions(+), 35 deletions(-)
 delete mode 100644 src/style/components/main-menu.scss

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index dcb4b66a..45a375c7 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -42,6 +42,22 @@ export const Menu: React.FC<IMenuProps> = props => {
     return (
         <menu className="main-menu HMenu">
             <style jsx>{`
+                .main-menu {
+                    font-size: var(--normal-font-size);
+                }
+
+                .main-menu li {
+                    display: inline-block;
+                    padding: 0.3em 0.2em 0;
+                    margin: 0 0.5em;
+
+                    position: relative;
+                }
+
+                .main-menu li:first-child {
+                    margin-left: 1em;
+                }
+
                 .selected {
                     font-weight: bold;
                     border-top: var(--menu-colored-mark-thickness) solid var(--light-color);
@@ -71,6 +87,7 @@ export const Menu: React.FC<IMenuProps> = props => {
                     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
deleted file mode 100644
index f3344f02..00000000
--- a/src/style/components/main-menu.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.main-menu {
-    font-size: var(--normal-font-size);
-
-    list-style: none;
-
-    & > li {
-        display: inline-block;
-        padding: 0.3em 0.2em 0;
-        margin: 0 0.5em;
-
-        position: relative;
-
-        &:first-child {
-            margin-left: 1em;
-        }
-    }
-
-    a {
-        color: var(--dark-color);
-        border-color: var(--dark-color);
-
-        &:hover {
-            border-color: var(--dark-color);
-        }
-    }
-
-    
-}
-
-@media (max-width: var(--mobile-width)) {
-    .main-menu {
-        font-size: 1em;
-    }
-}
diff --git a/src/style/style.scss b/src/style/style.scss
index 0aae1009..0ec29777 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -3,7 +3,6 @@
 @import "components/document";
 @import "components/document-row";
 @import "components/documents-container";
-@import "components/main-menu";
 @import "components/navigation";
 @import "components/breadcrumbs";
 @import "components/timeline";