From b5698329e63a79091aa16bd672b0f551b0ced1c8 Mon Sep 17 00:00:00 2001
From: Amin Deraiya <amin.deraiya.9@gmail.com>
Date: Tue, 21 Feb 2023 16:44:48 +0530
Subject: [PATCH] feat: toggle themes and mode

---
 src/components/Navbar/Navbar.js | 225 +++++++++++++++++++++++---------
 src/contexts/ThemeContext.js    |  32 ++---
 2 files changed, 173 insertions(+), 84 deletions(-)

diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
index af7f79f25..b0289fdc3 100644
--- a/src/components/Navbar/Navbar.js
+++ b/src/components/Navbar/Navbar.js
@@ -9,15 +9,69 @@ import { FaUser, FaFolderOpen } from 'react-icons/fa';
 import { makeStyles } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import CloseIcon from '@material-ui/icons/Close';
+import BrightnessHighIcon from '@material-ui/icons/BrightnessHigh';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
 
 import './Navbar.css';
 import { headerData } from '../../data/headerData';
 import { ThemeContext } from '../../contexts/ThemeContext';
+import { useEffect } from 'react';
+import {
+    greenThemeLight,
+    greenThemeDark,
+    bwThemeLight,
+    bwThemeDark,
+    blueThemeLight,
+    blueThemeDark,
+    redThemeLight,
+    redThemeDark,
+    orangeThemeLight,
+    orangeThemeDark,
+    purpleThemeLight,
+    purpleThemeDark,
+    pinkThemeLight,
+    pinkThemeDark,
+    yellowThemeLight,
+    yellowThemeDark,
+} from '../../theme/theme';
+import { Menu, MenuItem, IconButton } from '@material-ui/core';
 
-function Navbar() {
-    const { theme, setHandleDrawer } = useContext(ThemeContext);
+const type = {
+    light: {
+        greenThemeLight,
+        bwThemeLight,
+        blueThemeLight,
+        redThemeLight,
+        orangeThemeLight,
+        purpleThemeLight,
+        pinkThemeLight,
+        yellowThemeLight,
+    },
+    dark: {
+        greenThemeDark,
+        bwThemeDark,
+        blueThemeDark,
+        redThemeDark,
+        orangeThemeDark,
+        purpleThemeDark,
+        pinkThemeDark,
+        yellowThemeDark,
+    },
+};
 
+function Navbar() {
     const [open, setOpen] = useState(false);
+    const { theme, setHandleDrawer, setTheme, themeType, setThemeType } = useContext(ThemeContext);
+    const [themes, setThemes] = useState(type[themeType]);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
 
     const handleDrawerOpen = () => {
         setOpen(true);
@@ -29,6 +83,23 @@ function Navbar() {
         setHandleDrawer();
     };
 
+    const handleSetTheme = (theme, e) => {
+        setTheme(themes[theme]);
+        handleClick(e);
+    };
+
+    useEffect(() => {
+        if (themeType === 'dark') {
+            setThemes(type['dark']);
+            const find = Object.keys(type.dark).filter((item) => type.dark[item].primary === theme.primary);
+            setTheme(type.dark[find]);
+        } else {
+            setThemes(type['light']);
+            const find = Object.keys(type.light).filter((item) => type.light[item].primary === theme.primary);
+            setTheme(type.light[find]);
+        }
+    }, [themeType]);
+
     const useStyles = makeStyles((t) => ({
         navMenu: {
             fontSize: '2.5rem',
@@ -118,6 +189,20 @@ function Navbar() {
                 fontSize: '1.385rem',
             },
         },
+        toggleThemeIconButton: {
+            height: '30px',
+            width: '30px',
+            borderRadius: '50%',
+            transform: 'translateY(-10px)',
+            marginRight: 10,
+            overflow: 'hidden',
+            backgroundColor: theme.primary,
+            border: `2px solid ${themeType === 'light' ? 'black' : 'white'}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+        },
     }));
 
     const classes = useStyles();
@@ -133,15 +218,52 @@ function Navbar() {
     return (
         <div className='navbar'>
             <div className='navbar--container'>
-                <h1 style={{ color: theme.secondary }}>
-                    {shortname(headerData.name)}
-                </h1>
-
-                <IoMenuSharp
-                    className={classes.navMenu}
-                    onClick={handleDrawerOpen}
-                    aria-label='Menu'
-                />
+                <h1 style={{ color: theme.secondary }}>{shortname(headerData.name)}</h1>
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <>
+                        <IconButton
+                            className={classes.toggleThemeIconButton}
+                            aria-controls='simple-menu'
+                            aria-haspopup='true'
+                            onClick={handleClick}
+                        />
+                        <Menu
+                            id='simple-menu'
+                            anchorEl={anchorEl}
+                            keepMounted
+                            open={Boolean(anchorEl)}
+                            onClose={handleClose}
+                        >
+                            {Object.keys(themes).map((item, index) => {
+                                return (
+                                    <MenuItem onClick={handleClose} key={index}>
+                                        <IconButton
+                                            style={{
+                                                height: '30px',
+                                                width: '30px',
+                                                borderRadius: '50%',
+                                                overflow: 'hidden',
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                padding: 0,
+                                            }}
+                                            aria-controls='simple-menu'
+                                            aria-haspopup='true'
+                                            onClick={(e) => handleSetTheme(item, e)}
+                                        >
+                                            <div style={{ width: '15px', height: '30px', backgroundColor: themes[item].primary }} />
+                                            <div
+                                                style={{ width: '15px', height: '30px', backgroundColor: themes[item].secondary }}
+                                            />
+                                        </IconButton>
+                                    </MenuItem>
+                                );
+                            })}
+                        </Menu>
+                    </>
+                    <IoMenuSharp className={classes.navMenu} onClick={handleDrawerOpen} aria-label='Menu' />
+                </div>
             </div>
             <Drawer
                 variant='temporary'
@@ -178,53 +300,28 @@ function Navbar() {
                 <div onClick={handleDrawerClose}>
                     <div className='navLink--container'>
                         <Fade left>
-                            <NavLink
-                                to='/'
-                                smooth={true}
-                                spy='true'
-                                duration={2000}
-                            >
+                            <NavLink to='/' smooth={true} spy='true' duration={2000}>
                                 <div className={classes.drawerItem}>
-                                    <IoHomeSharp
-                                        className={classes.drawerIcon}
-                                    />
-                                    <span className={classes.drawerLinks}>
-                                        Home
-                                    </span>
+                                    <IoHomeSharp className={classes.drawerIcon} />
+                                    <span className={classes.drawerLinks}>Home</span>
                                 </div>
                             </NavLink>
                         </Fade>
 
                         <Fade left>
-                            <NavLink
-                                to='/#about'
-                                smooth={true}
-                                spy='true'
-                                duration={2000}
-                            >
+                            <NavLink to='/#about' smooth={true} spy='true' duration={2000}>
                                 <div className={classes.drawerItem}>
                                     <FaUser className={classes.drawerIcon} />
-                                    <span className={classes.drawerLinks}>
-                                        About
-                                    </span>
+                                    <span className={classes.drawerLinks}>About</span>
                                 </div>
                             </NavLink>
                         </Fade>
 
                         <Fade left>
-                            <NavLink
-                                to='/#resume'
-                                smooth={true}
-                                spy='true'
-                                duration={2000}
-                            >
+                            <NavLink to='/#resume' smooth={true} spy='true' duration={2000}>
                                 <div className={classes.drawerItem}>
-                                    <HiDocumentText
-                                        className={classes.drawerIcon}
-                                    />
-                                    <span className={classes.drawerLinks}>
-                                        Resume
-                                    </span>
+                                    <HiDocumentText className={classes.drawerIcon} />
+                                    <span className={classes.drawerLinks}>Resume</span>
                                 </div>
                             </NavLink>
                         </Fade>
@@ -248,38 +345,36 @@ function Navbar() {
                         </Fade>
 
                         <Fade left>
-                            <NavLink
-                                to='/#blog'
-                                smooth={true}
-                                spy='true'
-                                duration={2000}
-                            >
+                            <NavLink to='/#blog' smooth={true} spy='true' duration={2000}>
                                 <div className={classes.drawerItem}>
-                                    <FaFolderOpen
-                                        className={classes.drawerIcon}
-                                    />
-                                    <span className={classes.drawerLinks}>
-                                        Blog
-                                    </span>
+                                    <FaFolderOpen className={classes.drawerIcon} />
+                                    <span className={classes.drawerLinks}>Blog</span>
                                 </div>
                             </NavLink>
                         </Fade>
 
                         <Fade left>
-                            <NavLink
-                                to='/#contacts'
-                                smooth={true}
-                                spy='true'
-                                duration={2000}
-                            >
+                            <NavLink to='/#contacts' smooth={true} spy='true' duration={2000}>
                                 <div className={classes.drawerItem}>
                                     <MdPhone className={classes.drawerIcon} />
-                                    <span className={classes.drawerLinks}>
-                                        Contact
-                                    </span>
+                                    <span className={classes.drawerLinks}>Contact</span>
                                 </div>
                             </NavLink>
                         </Fade>
+
+                        <Fade left>
+                            <div
+                                className={classes.drawerItem}
+                                onClick={() => setThemeType(themeType === 'light' ? 'dark' : 'light')}
+                            >
+                                {themeType === 'light' ? (
+                                    <Brightness4Icon className={classes.drawerIcon} />
+                                ) : (
+                                    <BrightnessHighIcon className={classes.drawerIcon} />
+                                )}
+                                <span className={classes.drawerLinks}>{themeType === 'light' ? 'Dark' : 'Light'}</span>
+                            </div>
+                        </Fade>
                     </div>
                 </div>
             </Drawer>
diff --git a/src/contexts/ThemeContext.js b/src/contexts/ThemeContext.js
index 8f2fc6dcf..00d38416c 100644
--- a/src/contexts/ThemeContext.js
+++ b/src/contexts/ThemeContext.js
@@ -1,27 +1,21 @@
-import React, { createContext, useState } from 'react'
+import React, { createContext, useState } from 'react';
 
-import { themeData } from '../data/themeData'
+import { themeData } from '../data/themeData';
 
-export const ThemeContext = createContext()
+export const ThemeContext = createContext();
 
 function ThemeContextProvider(props) {
-    // eslint-disable-next-line
-    const [theme, setTheme] = useState(themeData.theme)
-    const [drawerOpen, setDrawerOpen] = useState(false)
+  // eslint-disable-next-line
+  const [theme, setTheme] = useState(themeData.theme);
+  const [themeType, setThemeType] = useState('light');
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
-    const setHandleDrawer = () => {
-        setDrawerOpen(!drawerOpen)
-    }
+  const setHandleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
 
-
-
-    const value = { theme, drawerOpen, setHandleDrawer }
-    return (
-        <ThemeContext.Provider value={value}>
-            {props.children}
-        </ThemeContext.Provider>
-    )
+  const value = { theme, setTheme, drawerOpen, themeType, setThemeType, setHandleDrawer };
+  return <ThemeContext.Provider value={value}>{props.children}</ThemeContext.Provider>;
 }
 
-
-export default ThemeContextProvider
\ No newline at end of file
+export default ThemeContextProvider;