'use client'

// Nextjs
import Image from 'next/image'
// import { usePathname } from 'next/navigation'

// MUI
import { AppBar, Box, Container, IconButton, Toolbar } from '@mui/material'
import MenuIcon from '@mui/icons-material/Menu'

// Data
import { NavbarDataArray } from '@/data'

// UI
import { NavbarLinkTypography, NextLink } from '@/ui'

// Image from Public Dir
import CodeXplorer57Logo from '../../../../public/PNGLogo/CodeXplorer_Logo_57x57.png'

interface DesktopNavbarProps {
  handleDrawerToggle: () => void
}

const DesktopNavbar = ({ handleDrawerToggle }: DesktopNavbarProps) => {
  // const pathname = usePathname()

  return (
    <Box>
      <AppBar component="nav" sx={{ background: 'transparent', boxShadow: 'none', position: 'absolute' }}>
        <Container maxWidth="xl">
          <Toolbar sx={{ height: '70px', minHeight: '70px' }}>
            <IconButton aria-label="open drawer" edge="start" onClick={handleDrawerToggle} sx={{ mr: 2, display: { sm: 'none' }, color: '#000' }}>
              <MenuIcon />
            </IconButton>

            <Box sx={{ flexGrow: { md: 1, xs: 0 }, ml: 'auto' }}>
              <NextLink href="/" aria-label="CodeXplorer Home" title="CodeXplorer Home">
                <Image src={CodeXplorer57Logo} alt="CodeXplorer" title="CodeXplorer" loading="lazy" />
              </NextLink>
            </Box>

            <Box sx={{ flexGrow: 3, display: { xs: 'none', md: 'flex' }, justifyContent: { xs: 'space-between', md: 'flex-end' } }}>
              {NavbarDataArray.map((data, idx) => {
                return (
                  <NavbarLinkTypography key={idx}>
                    <NextLink href={data?.url || '/'}>
                      {data?.label}
                    </NextLink>
                  </NavbarLinkTypography>
                )
              })}
            </Box>
          </Toolbar>
        </Container>
      </AppBar>
    </Box>
  )
}

export default DesktopNavbar

'use client'

// React
import React, { Fragment } from 'react'

// MUI
import { Box, Divider, Drawer, List, ListItem, ListItemButton, ListItemText } from '@mui/material'

// UI
import { NavbarLinkTypography, NextLink } from '@/ui'

// Data
import { NavbarDataArray } from '@/data'

// Sidebar Drawer Width
const drawerWidth = 250

interface MobileNavbarProps {
  mobileOpen: boolean
  handleDrawerToggle: () => void
}

const MobileNavbar = ({ mobileOpen, handleDrawerToggle }: MobileNavbarProps) => {
  const drawer = (
    <Box onClick={handleDrawerToggle} sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
      <List>
        {NavbarDataArray.map((data, idx) => {
          return (
            <Fragment key={idx}>
              <ListItem disablePadding>
                <ListItemButton sx={{ ml: 2 }}>
                  <NextLink href={data?.url || '/'} aria-label={data?.label} title={data?.label}>
                    <ListItemText primary={<NavbarLinkTypography>{data?.label}</NavbarLinkTypography>} />
                  </NextLink>
                </ListItemButton>
              </ListItem>
              <Divider />
            </Fragment>
          )
        })}
      </List>
    </Box>
  )

  return (
    <Box component="nav">
      <Drawer
        variant="temporary"
        open={mobileOpen}
        onClose={handleDrawerToggle}
        ModalProps={{
          keepMounted: true,
        }}
        sx={{
          display: { xs: 'block', sm: 'none' },
          zIndex: 99999,
          '& .MuiDrawer-paper': {
            boxSizing: 'border-box',
            width: drawerWidth,
          },
        }}
      >
        {drawer}
      </Drawer>
    </Box>
  )
}

export default MobileNavbar

'use client'

import { useState } from 'react'

// MUI
import { Box, Toolbar } from '@mui/material'

// Navbars
import DesktopNavbar from './Responsive/Desktop'
import MobileNavbar from './Responsive/Mobile'

const Navbar = () => {
  const [mobileOpen, setMobileOpen] = useState(false)

  const handleDrawerToggle = () => setMobileOpen(!mobileOpen)

  return (
    <Box>
      <DesktopNavbar handleDrawerToggle={handleDrawerToggle} />
      <MobileNavbar mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
      <Box component="main">
        <Toolbar />
      </Box>
    </Box>
  )
}

export default Navbar

'use client'

// Nextjs
import Link from 'next/link'

// MUI
import { styled } from '@mui/material'

// Fonts
import { JostFont } from './font'

export const NextLink = styled(Link)({
  textDecoration: 'none',
  color: '#000',
  fontFamily: JostFont.style.fontFamily,

  '&:hover': {
    textDecoration: 'none',
    color: '#000',
  },
})