MenuToggle component works

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>
+    )
+}

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