From ddd6c9daa3238806e71350410855c48fed06694f Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Wed, 16 Oct 2019 01:23:39 +0300
Subject: [PATCH] Menu component update

---
 src/components/Menu/index.tsx | 185 +++++++++++++++++-----------------
 1 file changed, 92 insertions(+), 93 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 698d14fd..cc2a7d10 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -10,117 +10,116 @@ export interface IMenuProps {
     items: any[]
 }
 
-export const Menu: React.FC<IMenuProps> = props => {
-    return (
-        <div className={cx(props.layout)}>
-            <style jsx>{`
-                div {
-                    display: flex;
-                    align-items: flex-start;
+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;
-                }
+                list-style: none;
+            }
 
-                div.desktop {
-                    flex-direction: row;
-                }
- 
-                div.mobile {
-                    flex-direction: column;
-                }
-                
-                li{
-                    position: relative;
-                    border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
-                }
+            div.desktop {
+                flex-direction: row;
+                flex-wrap: wrap;
+            }
 
-                li.desktop {
-                    padding: 0.3em 0.2em 0;
-                    margin-left: 1em;
-                    margin-right: 1em;
+            div.mobile {
+                flex-direction: column;
+            }
+            
+            li{
+                position: relative;
+                border-top: var(--menu-colored-mark-thickness) solid rgba(0, 0, 0, 0);
+            }
 
-                    font-size: var(--normal-font-size);
-                }
+            li.desktop {
+                padding: 0.3em 0.2em 0;
+                margin-right: 1em;
 
-                li.mobile {
-                    padding: 0.3em 0.5em;
-                    margin-bottom: var(--half-margin);
+                font-size: var(--normal-font-size);
+            }
 
-                    font-size: 1.25em;
-                }
+            li.mobile {
+                padding: 0.3em 0.5em;
+                margin-bottom: var(--half-margin);
 
-                li:last-child {
-                    margin-right: 0;
-                }
+                font-size: 1.25em;
+                color: white;
+            }
 
-                li.selected {
-                    font-weight: bold;
-                }
+            li:last-child {
+                margin-right: 0;
+            }
 
-                li.desktop.selected.blue {
-                    border-top-color: var(--blue-color);
-                }
+            li.selected {
+                font-weight: bold;
+            }
 
-                li.desktop.selected.orange {
-                    border-top-color: var(--orange-color);
-                }
+            li.desktop.selected.blue {
+                border-top-color: var(--blue-color);
+            }
 
-                li.desktop.selected.green {
-                    border-top-color: var(--green-color);
-                }
+            li.desktop.selected.orange {
+                border-top-color: var(--orange-color);
+            }
 
-                li.desktop.selected.yellow {
-                    border-top-color: var(--yellow-color);
-                }
+            li.desktop.selected.green {
+                border-top-color: var(--green-color);
+            }
 
-                li.desktop.selected.pink {
-                    border-top-color: var(--pink-color);
-                }
+            li.desktop.selected.yellow {
+                border-top-color: var(--yellow-color);
+            }
 
-                li.desktop.selected.red {
-                    border-top-color: var(--red-color);
-                }
+            li.desktop.selected.pink {
+                border-top-color: var(--pink-color);
+            }
 
-                li.mobile.selected.blue {
-                    background-color: var(--blue-color);
-                }
+            li.desktop.selected.red {
+                border-top-color: var(--red-color);
+            }
 
-                li.mobile.selected.orange {
-                    background-color: var(--orange-color);
-                }
+            li.mobile.selected.blue {
+                background-color: var(--blue-color);
+            }
 
-                li.mobile.selected.green {
-                    background-color: var(--green-color);
-                }
+            li.mobile.selected.orange {
+                background-color: var(--orange-color);
+            }
 
-                li.mobile.selected.yellow {
-                    background-color: var(--yellow-color);
-                }
+            li.mobile.selected.green {
+                background-color: var(--green-color);
+            }
 
-                li.mobile.selected.pink {
-                    background-color: var(--pink-color);
-                }
+            li.mobile.selected.yellow {
+                background-color: var(--yellow-color);
+            }
 
-                li.mobile.selected.red {
-                    background-color: var(--red-color);
-                }
-            `}</style>
+            li.mobile.selected.pink {
+                background-color: var(--pink-color);
+            }
 
-            {props.items.map((item, index) => (
-                <li key={index}
-                    className={cx(
-                        props.layout,
-                        item.color, {
-                        selected: item.highlighted,
-                    })}
-                >
-                    <MenuItem
-                        url={itemUrl(item.url)}
-                        text={item.text}
-                        active={item.active}
-                    />
-                </li>
-            ))}
-        </div>
-    )
-}
+            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,
+                })}
+            >
+                <MenuItem
+                    url={itemUrl(item.url)}
+                    text={item.text}
+                    active={item.active}
+                />
+            </li>
+        ))}
+    </div>
+)