From 1e092d94568f82cb4f30d6a13e06cc05b8f64612 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Fri, 15 Jul 2022 17:45:35 +0300
Subject: [PATCH] add ThemeSwitchMenu

---
 src/components/headerbar/ThemeSwitchMenu.tsx | 57 ++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/headerbar/ThemeSwitchMenu.tsx

diff --git a/src/components/headerbar/ThemeSwitchMenu.tsx b/src/components/headerbar/ThemeSwitchMenu.tsx
new file mode 100644
index 0000000..8740671
--- /dev/null
+++ b/src/components/headerbar/ThemeSwitchMenu.tsx
@@ -0,0 +1,57 @@
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Context } from "../../context/context";
+
+const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }> = (props) => {
+    const { context, textColor } = props;
+    const menuButton = <span
+        style={{ color: textColor }}
+        className="material-symbols-outlined">
+        light_mode
+    </span>;
+    const menuItems = context.themeManager.themes.map((theme, index) => {
+        const themeBackground = context.themeManager.theme.background;
+        return (
+            <MenuItem
+                key={index}
+                style={{ color: textColor }}
+                //@ts-ignore
+                onMouseOver={(event) => (event.target.style.background = themeBackground)}
+                //@ts-ignore
+                onMouseOut={(event) => (event.target.style.background = "transparent")}
+                onClick={() => (context.themeManager.theme = theme)}>
+                <div style={{ background: theme.boardColor }} className="theme-color-circle" />
+                {theme.name}
+                <style jsx>{`
+                .theme-color-circle {
+                    border-radius: 5vw;
+                    width: 1vw;
+                    height: 1vw;
+                    margin-right: 1vw;
+                }
+                `}</style>
+            </MenuItem>
+        );
+    })
+    return (
+        <div className="menu-container">
+            <Menu
+                menuStyle={{ background: context.themeManager.theme.appBarBgColor }}
+                menuButton={menuButton}
+                transition
+                align="end">
+                {menuItems}
+            </Menu>
+            <style jsx>{`
+                .menu-container {
+                    margin: 0 1vh;
+                    display: flex;
+                    align-items: center;
+                }
+            `}</style>
+        </div>
+    );
+}
+
+export default ThemeSwitchMenu;
\ No newline at end of file