all menu style moved to jsx

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}

src/style/components/main-menu.scss

@@ -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;
-    }
-}

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";