absolue F&%* failure

components/Nav.js

@@ -13,14 +13,37 @@ import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import AdbIcon from '@mui/icons-material/Adb';
 import  Link  from'next/link';
+import * as linking from './linking.json';
+
+
+export const getStaticProps = async ({ params }) =>{
+  const hrefs = linking.filter((p) => p.id.toString() === params.id)
+  console.log(hrefs)
+  return{
+    props:{
+      url:hrefs,
+    },
+  };
+};
+export const getStaticPaths = async() =>{
+  const paths = linking.map((url =>({
+    params:{id:url.id.toString()},
+    //  params:{main:url.main.toString()},
+    //  params:{link:url.main.link.toString()},
+  })));
+ 
+  return{ paths,fallback:false}
+}
 
-const pages = ['Donation', 'callender','temp-page2','temp-page3','temp-page4'];
 const settings = [ 'setting'];
 
-const ResponsiveAppBar = () => {
+const ResponsiveAppBar = (url) => {
+  const hrefs = url.hrefs;
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
+
+
   const handleOpenNavMenu = (event) => {
     setAnchorElNav(event.currentTarget);
   };
@@ -88,16 +111,16 @@ const ResponsiveAppBar = () => {
                 display: { xs: 'block', md: 'none' },
               }}
             >
-              {pages.map((page) => (
-                <MenuItem key={page} onClick={handleCloseNavMenu}>
-                  <Link href = {`/${page}`}> 
+              {hrefs?.map((rout) => (
+                <MenuItem prop={rout.link} onClick={handleCloseNavMenu}>
+                  <Link href = {`${rout.link}`}> 
                     <Typography 
                       textAlign="center"            
                       sx={{
                       color: 'inherit',
                       textDecoration: 'none',
                     }}>
-                      {page}
+                      {hrefs.name}
                     </Typography>
                   </Link>
                 </MenuItem>
@@ -126,17 +149,17 @@ const ResponsiveAppBar = () => {
             Home
           </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-            {pages.map((page) => (
-              <Link href = {`/${page}`}>
+
+              <Link href = {`${hrefs?.link}`}>
                 <Button
-                  key={page}
+                  key={hrefs}
                   onClick={handleCloseNavMenu}
                   sx={{ my: 2, color: 'white', display: 'block',textDecoration: 'none'}}
                 >
-                  {page}
+                  {hrefs?.name}
                 </Button>
               </Link>
-            ))}
+
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>

components/light_dark.js

@@ -21,10 +21,9 @@ const dark = createTheme({
     secondary: blue,
   },
 });
-
 const Theme = ({ children, theme, ...rest }) => 
  (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme?light:dark}>
       <CssBaseline />
       {children}
     </ThemeProvider>
@@ -32,14 +31,14 @@ const Theme = ({ children, theme, ...rest }) =>
 
 export const withTheme = (Component) => {
   return (props) => {
-    const [theme, setTheme] = useState();
+    const [theme, setTheme] = useState(!Theme);
 
     const handleChange = (c) => {
-      setDarkMode(c)
+      setTheme(c)
     }
     return (
       <Theme theme={theme}>
-        <Component {...props} theme={theme} onThemeChange={setDarkMode} />
+        <Component {...props} theme={Theme} onThemeChange={setTheme} />
       </Theme>
     );
   };

components/linking.json

@@ -0,0 +1,31 @@
+{
+   "main":[
+
+    {    
+        "id":"1",
+        "name":"Donation",
+        "link":"/Donation"
+    },
+    {
+        "id":"2",
+        "name":"callender",
+        "link":"/callender"
+    },
+    {
+        "id":"3",
+        "name":"temp-page2",
+        "link":"/temp-page2"
+    },
+    {
+        "id":"4",
+        "name":"temp-page3",
+        "link":"/temp-page3"
+    },
+    {
+        "id":"5",
+        "name":"temp-page4",
+        "link":"/temp-page4"
+    }
+    ]
+    
+}

components/temp.txt

@@ -1,38 +1,30 @@
-import { useState } from "react";
-import "@fontsource/roboto";
-import {
-  Card,
-  CardHeader,
-  Switch,
-  CardContent,
-  Box,
-  Container,
-  Typography,
-  FormGroup,
-  FormControlLabel,
-  CssBaseline,
-} from "@mui/material";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
-
-
-<div className="App">
-<Box component="div" p={5}></Box>
-<Card>
-  <CardHeader
-    action={
-        <FormGroup>
-        <FormControlLabel
-          control={
-              <Switch checked={isDarkTheme} onChange={changeTheme} />
-          }
-          />
-      </FormGroup>
+[    
+    {
+        "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"
+        }  
     }
-    />
-  <CardContent>
-    <Typography variant="h3" component="h3">
-    {isDarkTheme? "Dark Theme" : "Light Theme"}
-    </Typography>
-  </CardContent>
-</Card>
-</div>
+]

package.json

@@ -19,7 +19,9 @@
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.5",
+    "@mui/system": "^5.8.6",
     "@mui/x-date-pickers": "^5.0.0-alpha.6",
+    "config": "^3.3.7",
     "date-fns": "2.20",
     "dom": "^0.0.3",
     "mui": "^1.0.0",

pages/_app.js

@@ -37,7 +37,7 @@ const clientSideEmotionCache = createEmotionCache();
 function MyApp(props) {
   const { darkMode, setDarkMode } = props;
   const classes = useStyles();
-  const theme = useTheme();
+  const Theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("xs"));
 
   const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
@@ -55,7 +55,7 @@ return (
         <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
       <Layout>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={Theme}>
           {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
           <Component {...pageProps} />
@@ -63,8 +63,8 @@ return (
             <FormControlLabel
               control={
                 <Switch            
-                  checked={darkMode}
-                  onChange={() => setDarkMode(!darkMode)} />
+                  checked={theme}
+                  onChange={() => withTheme(!theme)} />
                   }
                   label="Dark Mode"
                 />

pages/temp-page1.js

@@ -1,15 +0,0 @@
-import Head from 'next/head'
-import styles from '../styles/Layout.module.css'
-
-const temp1 = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-          <title> Page 3</title>
-      </Head>
-      <h1>page temp 1</h1>
-    </div>
-  )
-}
-
-export default temp1

yarn.lock

@@ -562,6 +562,15 @@
     "@mui/utils" "^5.8.4"
     prop-types "^15.8.1"
 
+"@mui/private-theming@^5.8.6":
+  version "5.8.6"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.6.tgz#db2bafeda1699e43e67b3ff4f770d6b7a234501f"
+  integrity sha512-yHsJk1qU9r/q0DlnxGRJPHyM0Y/nUv8FTNgDTiI9I58GWuVuZqeTUr7JRvPh6ybeP/FLtW5eXEavRK9wxVk4uQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/utils" "^5.8.6"
+    prop-types "^15.8.1"
+
 "@mui/styled-engine@^5.8.0":
   version "5.8.0"
   resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.0.tgz"
@@ -585,6 +594,20 @@
     csstype "^3.1.0"
     prop-types "^15.8.1"
 
+"@mui/system@^5.8.6":
+  version "5.8.6"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.6.tgz#aed7e501c513429dab9cfbbe86da5dcd056c2a0a"
+  integrity sha512-+a+rD58XltKQHDrrjcuCta2cUBqdnLDUDwnphSLCMFigRl8/uk+R+fdQRlMNRXAOgnMb8ioWIgfjxri5pmTH4A==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.8.6"
+    "@mui/styled-engine" "^5.8.0"
+    "@mui/types" "^7.1.4"
+    "@mui/utils" "^5.8.6"
+    clsx "^1.1.1"
+    csstype "^3.1.0"
+    prop-types "^15.8.1"
+
 "@mui/types@^7.1.4":
   version "7.1.4"
   resolved "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz"
@@ -601,6 +624,17 @@
     prop-types "^15.8.1"
     react-is "^17.0.2"
 
+"@mui/utils@^5.8.6":
+  version "5.8.6"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.6.tgz#543de64a64bb9135316ecfd91d75a8740544d79f"
+  integrity sha512-QM2Sd1xZo2jOt2Vz5Rmro+pi2FLJyiv4+OjxkUwXR3oUM65KSMAMLl/KNYU55s3W3DLRFP5MVwE4FhAbHseHAg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@types/prop-types" "^15.7.5"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.8.1"
+    react-is "^17.0.2"
+
 "@mui/x-date-pickers@^5.0.0-alpha.6":
   version "5.0.0-alpha.6"
   resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.6.tgz#90fdb5730e0411862d7a7edd18af44f03ab8d889"
@@ -1036,6 +1070,13 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+config@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/config/-/config-3.3.7.tgz#4310410dc2bf4e0effdca21a12a4035860a24ee4"
+  integrity sha512-mX/n7GKDYZMqvvkY6e6oBY49W8wxdmQt+ho/5lhwFDXqQW9gI+Ahp8EKp8VAbISPnmf2+Bv5uZK7lKXZ6pf1aA==
+  dependencies:
+    json5 "^2.1.1"
+
 convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
@@ -1939,7 +1980,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.1:
+json5@^2.1.1, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==