From be9f07bdb79f93b054199f572856f23d82d51a5e Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Sat, 22 Feb 2020 03:40:14 +0300
Subject: [PATCH] Menu component updated

---
 src/components/Menu/ActiveLink.tsx |  15 ++++
 src/components/Menu/MenuItem.tsx   |  33 --------
 src/components/Menu/index.tsx      | 121 ++++-------------------------
 src/components/Menu/styles.css     |  52 +++++++++++++
 4 files changed, 80 insertions(+), 141 deletions(-)
 create mode 100644 src/components/Menu/ActiveLink.tsx
 delete mode 100644 src/components/Menu/MenuItem.tsx
 create mode 100644 src/components/Menu/styles.css

diff --git a/src/components/Menu/ActiveLink.tsx b/src/components/Menu/ActiveLink.tsx
new file mode 100644
index 00000000..bd2f4466
--- /dev/null
+++ b/src/components/Menu/ActiveLink.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export interface ActiveLinkProps {
+    href?: string
+    activeStyle?: React.CSSProperties
+}
+
+export const ActiveLink: React.FC<ActiveLinkProps> = props => props.href
+    ? (
+        <Link href={props.href}>
+            <a>{props.children}</a>
+        </Link>
+    ) : (
+        <span style={props.activeStyle}>{props.children}</span>
+    )
\ No newline at end of file
diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
deleted file mode 100644
index cc6bd5ab..00000000
--- a/src/components/Menu/MenuItem.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react'
-
-export interface IMenuItemProps {
-    active: boolean
-    text: string
-    url: string
-}
-
-export const MenuItem: React.FC<IMenuItemProps> = ({ active, text, url }) => (
-   <>
-        <style jsx>{`
-            a {
-                color: var(--dark-color);
-            }
-
-            a:visited {
-                color: var(--dark-color);
-            }
-
-            a:hover {
-                border-color: var(--dark-color);
-            }
-        `}</style>
-
-        {active
-            ? (
-                <span>{text}</span>
-            ) : (
-                <a href={url}>{text}</a>
-            )
-        }
-    </>
-)
\ No newline at end of file
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index cc2a7d10..7533ca8c 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,9 +1,7 @@
-import * as React from 'react'
-import cx from 'classnames'
-import { getPathWithNoTrailingSlash } from '../../lib/url'
-import { MenuItem } from './MenuItem'
+import './styles.css'
 
-const itemUrl = (url: string) => getPathWithNoTrailingSlash(url)
+import cx from 'classnames'
+import { ActiveLink } from './ActiveLink'
 
 export interface IMenuProps {
     layout: 'desktop' | 'mobile'
@@ -12,113 +10,20 @@ export interface IMenuProps {
 
 export const Menu: React.FC<IMenuProps> = props => (
     <div className={cx('menu', props.layout)}>
-        <style jsx>{`
-            .menu {
-                display: flex;
-                align-items: flex-start;
-
-                list-style: none;
-            }
-
-            div.desktop {
-                flex-direction: row;
-                flex-wrap: wrap;
-            }
-
-            div.mobile {
-                flex-direction: column;
-            }
-            
-            li{
-                position: relative;
-                border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
-            }
-
-            li.desktop {
-                padding: 0.3em 0.2em 0;
-                margin-right: 1em;
-
-                font-size: var(--normal-font-size);
-            }
-
-            li.mobile {
-                padding: 0.3em 0.5em;
-                margin-bottom: var(--half-margin);
-
-                font-size: 1.25em;
-                color: white;
-            }
-
-            li:last-child {
-                margin-right: 0;
-            }
-
-            li.selected {
-                font-weight: bold;
-            }
-
-            li.desktop.selected.blue {
-                border-top-color: var(--blue-color);
-            }
-
-            li.desktop.selected.orange {
-                border-top-color: var(--orange-color);
-            }
-
-            li.desktop.selected.green {
-                border-top-color: var(--green-color);
-            }
-
-            li.desktop.selected.yellow {
-                border-top-color: var(--yellow-color);
-            }
-
-            li.desktop.selected.pink {
-                border-top-color: var(--pink-color);
-            }
-
-            li.desktop.selected.red {
-                border-top-color: var(--red-color);
-            }
-
-            li.mobile.selected.blue {
-                background-color: var(--blue-color);
-            }
-
-            li.mobile.selected.orange {
-                background-color: var(--orange-color);
-            }
-
-            li.mobile.selected.green {
-                background-color: var(--green-color);
-            }
-
-            li.mobile.selected.yellow {
-                background-color: var(--yellow-color);
-            }
-
-            li.mobile.selected.pink {
-                background-color: var(--pink-color);
-            }
-
-            li.mobile.selected.red {
-                background-color: var(--red-color);
-            }
-        `}</style>
-
         {props.items.map((item, index) => (
             <li key={index}
-                className={cx(
-                    props.layout,
-                    item.color, {
-                    selected: item.highlighted,
+                className={cx('menuItem', props.layout, {
+                    selected: item.highlighted
                 })}
             >
-                <MenuItem
-                    url={itemUrl(item.url)}
-                    text={item.text}
-                    active={item.active}
-                />
+                <ActiveLink
+                    href={!item.active ? item.url : null}
+                    activeStyle={{
+                        fontWeight: 'bold',
+                    }}
+                >
+                    {item.text}
+                </ActiveLink>
             </li>
         ))}
     </div>
diff --git a/src/components/Menu/styles.css b/src/components/Menu/styles.css
new file mode 100644
index 00000000..c04d3137
--- /dev/null
+++ b/src/components/Menu/styles.css
@@ -0,0 +1,52 @@
+.menu {
+    display: flex;
+    align-items: flex-start;
+
+    list-style: none;
+}
+
+div.desktop {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+div.mobile {
+    flex-direction: column;
+}
+
+.menuItem {
+    position: relative;
+    border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
+}
+
+.menuItem.desktop {
+    padding: 0.3em 0.2em 0;
+    margin-right: 1em;
+
+    font-size: var(--normal-font-size);
+}
+
+.menuItem.mobile {
+    padding: 0.3em 0.5em;
+    margin-bottom: var(--half-margin);
+
+    font-size: 1.25em;
+    /* color: white; */
+    color: var(--color-text-opposite);
+}
+
+.menuItem:last-child {
+    margin-right: 0;
+}
+
+.menuItem.selected {
+    font-weight: bold;
+}
+
+.menuItem.mobile.selected {
+    background-color: var(--color-back-opposite);
+}
+
+.menuItem.desktop.selected {
+    border-top-color: var(--color-back-opposite);
+}