From 0f1438e8dbfd6590a3898aebea81fe70f3bbb4d5 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 15 Oct 2019 03:45:18 +0300
Subject: [PATCH] MenuToggle component works

---
 src/components/Menu/MenuToggle.tsx            |  59 ++++++++++++++++++
 src/style/hmenu.scss                          |  46 --------------
 {src/assets => static}/graphics/hmenu-b.png   | Bin
 .../graphics/hmenu-close-b.png                | Bin
 .../graphics/hmenu-close-hover-b.png          | Bin
 .../graphics/hmenu-hover-b.png                | Bin
 6 files changed, 59 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Menu/MenuToggle.tsx
 rename {src/assets => static}/graphics/hmenu-b.png (100%)
 rename {src/assets => static}/graphics/hmenu-close-b.png (100%)
 rename {src/assets => static}/graphics/hmenu-close-hover-b.png (100%)
 rename {src/assets => static}/graphics/hmenu-hover-b.png (100%)

diff --git a/src/components/Menu/MenuToggle.tsx b/src/components/Menu/MenuToggle.tsx
new file mode 100644
index 00000000..70be21ff
--- /dev/null
+++ b/src/components/Menu/MenuToggle.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react'
+import cx from 'classnames'
+
+export interface IMenuToggleProps {
+    open: boolean
+}
+
+export const MenuToggle: React.FC<IMenuToggleProps> = props => {
+    return (
+        <div className={cx({
+            open: props.open,
+            close: !props.open,
+        })}>
+            <style jsx>{`
+                div {
+                    //position: absolute;
+                    //left: 0;
+                    height: var(--hmenu-icon-height);
+
+                    margin: var(--hmenu-margin);
+
+                    display: flex;
+                }
+
+                a {
+                    text-decoration: none;
+                    border: none;
+
+                    width: var(--hmenu-icon-width);
+                    height: var(--hmenu-icon-height);
+                    background-size: 100%;
+                }
+
+                a:hover {
+                    text-decoration: none;
+                    border: none;
+                }
+
+                div.open a {
+                    background-image: url(/static/graphics/hmenu-close-b.png);
+                }
+
+                div.open a:hover {
+                    background-image: url(/static/graphics/hmenu-close-hover-b.png);
+                }
+
+                div.close a {
+                    background-image: url(/static/graphics/hmenu-b.png);
+                }
+
+                div.close a:hover {
+                    background-image: url(/static/graphics/hmenu-hover-b.png);
+                }
+            `}</style>
+
+            <a href="#"></a>
+        </div>
+    )
+}
diff --git a/src/style/hmenu.scss b/src/style/hmenu.scss
index 789742c4..31a11604 100644
--- a/src/style/hmenu.scss
+++ b/src/style/hmenu.scss
@@ -58,53 +58,7 @@
 
 
 
-.HMenu__toggle {
-  position: absolute;
-  left: 0;
-  height: var(--hmenu-icon-height);
 
-  margin: var(--hmenu-margin);
-
-  display: flex;
-
-  a {
-    text-decoration: none;
-    border: none;
-
-    width: var(--hmenu-icon-width);
-    height: var(--hmenu-icon-height);
-    background-size: 100%;
-  }
-
-  a:hover {
-    text-decoration: none;
-    border: none;
-  }
-}
-
-.HMenu--folded.HMenu--closed {
-  .HMenu__toggle {
-    a {
-      background-image: url(/graphics/hmenu-b.png);
-    }
-
-    a:hover {
-      background-image: url(/graphics/hmenu-hover-b.png);
-    }
-  }
-}
-
-.HMenu--folded.HMenu--open {
-  .HMenu__toggle {
-    a {
-      background-image: url(/graphics/hmenu-close-b.png);
-    }
-
-    a:hover {
-      background-image: url(/graphics/hmenu-close-hover-b.png);
-    }
-  }
-}
 
 
 
diff --git a/src/assets/graphics/hmenu-b.png b/static/graphics/hmenu-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-b.png
rename to static/graphics/hmenu-b.png
diff --git a/src/assets/graphics/hmenu-close-b.png b/static/graphics/hmenu-close-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-close-b.png
rename to static/graphics/hmenu-close-b.png
diff --git a/src/assets/graphics/hmenu-close-hover-b.png b/static/graphics/hmenu-close-hover-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-close-hover-b.png
rename to static/graphics/hmenu-close-hover-b.png
diff --git a/src/assets/graphics/hmenu-hover-b.png b/static/graphics/hmenu-hover-b.png
similarity index 100%
rename from src/assets/graphics/hmenu-hover-b.png
rename to static/graphics/hmenu-hover-b.png