Menus, globals, vendor page

frontend/components/header.js

@@ -2,15 +2,16 @@ import { MoonIcon, SunIcon } from '@chakra-ui/icons'
 import { Box, Button, Flex, Heading, Spacer, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
 import { Link } from '@chakra-ui/next-js'
 
-export default function Header({ siteName }) {
+export default function Header({ menu, globals }) {
   const { colorMode, toggleColorMode } = useColorMode()
+
   return (
     <>
       <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
         <Flex h={16} alignItems={'center'}>
-          <Heading size="md">{siteName}</Heading>
+          <Heading size="md">{globals.site_name}</Heading>
 
-          <MainMenu />
+          <MainMenu items={menu.items} />
           <Spacer />
 
           <Flex alignItems={'center'}>
@@ -24,17 +25,17 @@ export default function Header({ siteName }) {
   )
 }
 
-const MainMenu = () => {
+const MainMenu = ({ items }) => {
   const linkColor = useColorModeValue('gray.600', 'gray.200')
   const linkHoverColor = useColorModeValue('gray.800', 'white')
 
   return (
     <Stack direction={'row'} spacing={4} pl="4">
-      {NAV_ITEMS.map((navItem) => (
+      {items.map((navItem) => (
         <Box key={navItem.label}>
           <Link
             p={2}
-            href={navItem.href ?? '#'}
+            href={navItem.url ?? '#'}
             fontSize={'sm'}
             fontWeight={500}
             color={linkColor}
@@ -50,14 +51,3 @@ const MainMenu = () => {
     </Stack>
   )
 }
-
-const NAV_ITEMS = [
-  {
-    label: 'Vendors',
-    href: '/vendors',
-  },
-  {
-    label: 'About Us',
-    href: '/about-us',
-  },
-]