stable thank dad

components/Nav.js

@@ -13,32 +13,36 @@ 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';
+import navigation from '../data/navigation.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()},
-  })));
+// 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}
-}
+//   return{ paths,fallback:false}
+// }
 
 const settings = [ 'setting'];
 
-const ResponsiveAppBar = (url) => {
-  const hrefs = url.hrefs;
+const ResponsiveAppBar = () => {
+
+  console.log("navigation", navigation)
+
+
+  const hrefs = [];//url.hrefs;
   const [anchorElNav, setAnchorElNav] = React.useState(null);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
 
@@ -111,7 +115,23 @@ const ResponsiveAppBar = (url) => {
                 display: { xs: 'block', md: 'none' },
               }}
             >
-              {hrefs?.map((rout) => (
+
+              {navigation.map(({name:n, typography:t, ...v},i) => {
+                console.log('-> navigation',n,t,v,i)
+                return (
+                  <MenuItem key={`menuitem-${i}`} {...v} onClick={handleCloseNavMenu}>
+                     <Link {...v}> 
+                     <Typography  {...t}>
+                      {n}
+                    </Typography>
+                     </Link>
+                  </MenuItem>
+                )
+              })}
+
+
+
+              {/* hrefs?.map((rout) => (
                 <MenuItem prop={rout.link} onClick={handleCloseNavMenu}>
                   <Link href = {`${rout.link}`}> 
                     <Typography 
@@ -124,7 +144,7 @@ const ResponsiveAppBar = (url) => {
                     </Typography>
                   </Link>
                 </MenuItem>
-              ))}
+              )) */}
             </Menu>
           </Box>
           <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
@@ -148,6 +168,21 @@ const ResponsiveAppBar = (url) => {
             
             Home
           </Typography>
+          {navigation.map(({name:n, typography:t, ...v},i) => {
+          console.log('-> navigation',n,t,v,i)
+            return(
+           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+              <Link {...v}>
+              <Button key={`menuitem-${i}`} {...v}
+              onClick={handleCloseNavMenu}
+              sx={{ my: 2, color: 'white', display: 'block',textDecoration: 'none'}}>
+                {n}
+              </Button>
+              </Link>
+           </Box>
+            )
+          })}
+          /*
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
 
               <Link href = {`${hrefs?.link}`}>
@@ -161,7 +196,7 @@ const ResponsiveAppBar = (url) => {
               </Link>
 
           </Box>
-
+*/
           <Box sx={{ flexGrow: 0 }}>
             <Tooltip title="Open settings">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

components/linking.json

@@ -1,31 +0,0 @@
-{
-   "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"
-    }
-    ]
-    
-}

data/navigation.json

@@ -0,0 +1,34 @@
+[
+
+    {    
+        "id":"1",
+        "name":"Donation",
+        "href":"/Donation",
+        "typography": {
+            "textAlign":"center"  ,          
+            "sx":{
+            "color": "inherit",
+             "textDecoration": "none"
+        }}
+    },
+    {
+        "id":"2",
+        "name":"callender",
+        "href":"/callender"
+    },
+    {
+        "id":"3",
+        "name":"temp-page2",
+        "href":"/temp-page2"
+    },
+    {
+        "id":"4",
+        "name":"temp-page3",
+        "href":"/temp-page3"
+    },
+    {
+        "id":"5",
+        "name":"temp-page4",
+        "href":"/temp-page4"
+    }
+    ]