need dads help

components/Nav.js

@@ -182,21 +182,7 @@ const ResponsiveAppBar = () => {
            </Box>
             )
           })}
-          /*
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
 
-              <Link href = {`${hrefs?.link}`}>
-                <Button
-                  key={hrefs}
-                  onClick={handleCloseNavMenu}
-                  sx={{ my: 2, color: 'white', display: 'block',textDecoration: 'none'}}
-                >
-                  {hrefs?.name}
-                </Button>
-              </Link>
-
-          </Box>
-*/
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

components/light_dark.js

@@ -1,45 +1,86 @@
-import React, { useState } from "react";
-import { createTheme } from "@material-ui/core/styles";
-import { ThemeProvider } from "@material-ui/styles";
-import { CssBaseline } from "@material-ui/core";
-import blue from "@material-ui/core/colors/blue";
-import green from "@material-ui/core/colors/green";
+import React, { useState,useEffect  } from 'react';
+import { createTheme } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
 
+const ToggleButton = styled.button`
+  --toggle-width: 80px;
+  --toggle-height: 38px;
+  --toggle-padding: 4px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  font-size: 1.5rem;
+  line-height: 1;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+  padding: var(--toggle-padding);
+  border: 0;
+  border-radius: calc(var(--toggle-width) / 2);
+  cursor: pointer;
+  background: var(--color-bg-toggle);
+  transition: background 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+  &:focus {
+    outline-offset: 5px;
+  }
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+  &:hover {
+    box-shadow: 0 0 5px 2px var(--color-bg-toggle);
+  },
+`;
 
+const ToggleThumb = styled.span`
+  position: absolute;
+  top: var(--toggle-padding);
+  left: var(--toggle-padding);
+  width: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
+  height: calc(var(--toggle-height) - (var(--toggle-padding) * 2));
+  border-radius: 50%;
+  background: white;
+  transition: transform 0.25s ease-in-out;
+  transform: ${(p) =>
+    p.activeTheme === "dark"
+      ? "translate3d(calc(var(--toggle-width) - var(--toggle-height)), 0, 0)"
+      : "none"};
+`;
 const light = createTheme({
   palette: {
-    type: "light",
-    primary: blue,
-    secondary: green,
+    mode: 'light',
   },
 });
 
 const dark = createTheme({
   palette: {
-    type: "dark",
-    primary: green,
-    secondary: blue,
+    mode: 'dark',
   },
 });
-const Theme = ({ children, theme, ...rest }) => 
- (
-    <ThemeProvider theme={theme?light:dark}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  )
-
-export const withTheme = (Component) => {
-  return (props) => {
-    const [theme, setTheme] = useState(!Theme);
+function activeTheme(themeMode){
+  return themeMode === 'light'? light : dark;
+}
+export const toggleTheme = () => { 
+      const [activeTheme, setTheme] = useState("light");
+      const altheme = activeTheme === "light" ? "dark" : "light";
+    useEffect(() => {
+      const savedTheme = window.localStorage.getItem("theme");
+      savedTheme && setActiveTheme(savedTheme);
+    }, []);
+    useEffect(() => {
+      document.body.dataset.theme = activeTheme;
+      window.localStorage.setItem("theme", activeTheme);
+    }, [activeTheme]);
 
-    const handleChange = (c) => {
-      setTheme(c)
-    }
     return (
-      <Theme theme={theme}>
-        <Component {...props} theme={Theme} onThemeChange={setTheme} />
-      </Theme>
+      <ToggleButton
+        aria-label={`Change to ${altheme} mode`}
+        title={`Change to ${altheme} mode`}
+        type="button"
+        onClick={() => setActiveTheme(altheme)}
+      >
+        <ToggleThumb activeTheme={activeTheme} />
+        <span>🌙</span>
+      <span>☀️</span>
+      </ToggleButton>
     );
   };
-};

components/temp.txt

@@ -1,30 +1,10 @@
-[    
-    {
-        "home":{
-        
-        "id":"Home",
-        "link":"/"
-        },
-        
-        "Donation":{    
-            "id":"Donation",
-            "link":"/Donation"
-        },
-        "callender":{
-            "id":"callender",
-            "link":"/callender"
-        },
-       "temp-page2": {
-            "id":"temp-page2",
-            "link":"/temp-page2"
-        },
-        "temp-page3":{
-            "id":"temp-page3",
-            "link":"/"
-        },
-        "temp-page4": {
-            "id":"temp-page4",
-            "link":"/temp-page4"
-        }  
-    }
-]
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch            
+                  checked={theme}
+                  onChange={() => withTheme(theme)} />
+                  }
+                  label="Dark Mode"
+                />
+          </FormGroup>

pages/_app.js

@@ -10,16 +10,18 @@ import App from 'next/app';
 import { useState } from "react";
 import "@fontsource/roboto";
 import {
-  CssBaseline,  FormGroup,
+  CssBaseline,  FormGroup, ToggleButton,
 } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import Grid from "@material-ui/core/Grid";
 import { makeStyles } from "@material-ui/core";
 import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
-import { withTheme } from "../components/light_dark";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import Switch from "@material-ui/core/Switch";
+import dynamic from 'next/dynamic';
+import styled from '@emotion/styled';
+const toggleTheme = dynamic(() => import("../components/light_dark"),{
+  ssr:false
+});
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -35,7 +37,6 @@ const DynamicComponentWithNoSSR = <>Some JSX</>
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 function MyApp(props) {
-  const { darkMode, setDarkMode } = props;
   const classes = useStyles();
   const Theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("xs"));
@@ -47,7 +48,6 @@ function MyApp(props) {
     console.log('You are on the server')
   }
 
-
 return (
   <>
     <CacheProvider value={emotionCache}>
@@ -59,16 +59,7 @@ return (
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
           <Component {...pageProps} />
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Switch            
-                  checked={theme}
-                  onChange={() => withTheme(!theme)} />
-                  }
-                  label="Dark Mode"
-                />
-          </FormGroup>
+          <toggleTheme/>
         </ThemeProvider>
       </Layout> 
     </CacheProvider>
@@ -82,4 +73,4 @@ MyApp.propTypes = {
 
 };
 
-export default withTheme(MyApp);
+export default MyApp;