created navbar component

src/app/components/Navbar.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import React, { useState } from 'react'
+import NavbarLinkToggle from './NavbarLinkToggle'
+import NavbarLink from './NavbarLink'
+
+const links = [
+  { to: '/', text: 'Home' },
+  { to: '/about', text: 'About Us' },
+  { to: '/contact', text: 'Contact' },
+  { to: '/projects', text: 'Our Projects' },
+  { to: '/team', text: 'Team' },
+]
+
+export default function Navbar() {
+  const [isOpen, setIsOpen] = useState(true)
+
+  const toggle = () => setIsOpen((prevState: Boolean) => !prevState)
+
+  return (
+    <Flex>
+      {/* Logo */}
+      <Box>
+        <Text>Ray Foundation</Text>
+      </Box>
+      {/* Links */}
+      <Stack direction={{ base: 'column', md: 'row' }}>
+        {links.map((link) => {
+          return <NavbarLink key={link.to} to={link.to} text={link.text} />
+        })}
+      </Stack>
+      {/* Toggle */}
+      <NavbarLinkToggle isOpen={isOpen} toggle={toggle} />
+    </Flex>
+  )
+}

src/app/components/NavbarLink.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Link from 'next/link'
+import { Text } from '@chakra-ui/react'
+
+export default function NavbarLink({ to, text }: { to: string; text: string }) {
+  return (
+    <Link href={to}>
+      <Text>{text}</Text>
+    </Link>
+  )
+}

src/app/components/NavbarLinkToggle.tsx

@@ -0,0 +1,18 @@
+'use client'
+import { Box } from '@chakra-ui/react'
+import React from 'react'
+import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+
+export default function NavbarLinkToggle({
+  isOpen,
+  toggle,
+}: {
+  isOpen: boolean
+  toggle: () => void
+}) {
+  return (
+    <Box display={{ base: 'block', md: 'none' }} onClick={toggle}>
+      {isOpen ? <CloseIcon /> : <HamburgerIcon />}
+    </Box>
+  )
+}