coffee/components/layout/navbar/Navbar.jsx

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { signOut, useSession } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
  BASE_PAGE,
  CART_PAGE,
  CONTACT_PAGE,
  PRODUCTS_PAGE,
  PROFILE_PAGE,
} from '../../../constants/pages';
import { useStore } from '../../../store/cart-context';
import { useUserUpdate } from '../../../store/user-context';

const Navbar = () => {
  const router = useRouter();
  const { totalQuantity } = useStore();
  const { data: session } = useSession();
  const { clearUser } = useUserUpdate();

  const signOutHandler = async () => {
    const data = await signOut({ redirect: false, callbackUrl: '/' });
    clearUser();
    router.push(data.url);
  };

  return (
    <AppBar
      position="absolute"
      sx={{
        zIndex: 100,
        top: 20,
        width: '100%',
        backgroundColor: 'transparent',
        boxShadow: 'none',
        height: 40,
      }}
    >
      <Box sx={{ display: 'flex', width: '100%' }}>
        <Box
          sx={{
            flexGrow: 1,
            maxWidth: '50%',
            height: 30,
            display: 'flex',
            px: 10,
          }}
        >
          <Link key="home" href={BASE_PAGE}>
            <Typography
              textAlign="center"
              sx={{
                mx: 'auto',
                fontSize: { md: 20, xs: 17 },
                fontWeight: 500,
                mr: { lg: 0, xs: 2 },
                color: router.pathname === '/' ? 'white' : 'black',
                textDecoration: 'none',
                cursor: 'pointer',
              }}
            >
              Home
            </Typography>
          </Link>

          <Link key="menu" href={BASE_PAGE}>
            <Typography
              textAlign="center"
              sx={{
                mx: 'auto',
                fontSize: { md: 20, xs: 17 },
                fontWeight: 500,
                mr: { lg: 0, xs: 2 },
                color: router.pathname === '/' ? 'white' : 'black',
                textDecoration: 'none',
                cursor: 'pointer',
              }}
            >
              Menu
            </Typography>
          </Link>

          <Link key="about" href={BASE_PAGE}>
            <Typography
              textAlign="center"
              sx={{
                mx: 'auto',
                fontSize: { md: 20, xs: 17 },
                fontWeight: 500,
                mr: { lg: 0, xs: 2 },
                color: router.pathname === '/' ? 'white' : 'black',
                textDecoration: 'none',
                cursor: 'pointer',
              }}
            >
              About
            </Typography>
          </Link>

          <Link key="store" href={PRODUCTS_PAGE}>
            <Typography
              textAlign="center"
              sx={{
                mx: 'auto',
                fontSize: { md: 20, xs: 17 },
                fontWeight: 500,
                mr: { lg: 0, xs: 2 },
                color: router.pathname === '/' ? 'white' : 'black',
                textDecoration: 'none',
                cursor: 'pointer',
              }}
            >
              Store
            </Typography>
          </Link>

          <Link key="contact" href={CONTACT_PAGE}>
            <Typography
              textAlign="center"
              sx={{
                mx: 'auto',
                fontSize: { md: 20, xs: 17 },
                fontWeight: 500,
                color: router.pathname === '/' ? 'white' : 'black',
                textDecoration: 'none',
                cursor: 'pointer',
              }}
            >
              Contact
            </Typography>
          </Link>
        </Box>
        <Box
          sx={{
            flexGrow: 1,
            maxWidth: '50%',
            height: 30,
            display: 'flex',
            justifyContent: 'right',
            pt: 0.5,
            mr: 4,
          }}
        >
          {session?.user?._id && (
            <Box
              sx={{
                mx: 2,
                mt: 0.1,
                cursor: 'pointer',
              }}
              onClick={signOutHandler}
            >
              <Image
                src="/images/logout.svg"
                alt="profile"
                width={18}
                height={20}
              />
            </Box>
          )}
          <Box
            sx={{
              mx: 2,
              cursor: 'pointer',
            }}
          >
            <Link key="home" href={PROFILE_PAGE}>
              <Image
                src="/images/profile.svg"
                alt="profile"
                width={24}
                height={24}
              />
            </Link>
          </Box>
          <Box
            sx={{
              mr: 6,
              ml: 2,
              cursor: 'pointer',
            }}
          >
            <Link key="home" href={CART_PAGE}>
              <Box>
                <Box
                  sx={{
                    color: 'white',
                    zIndex: 3,
                    width: 20,
                    height: 20,
                    borderRadius: 20,
                    textAlign: 'center',
                    px: 0.5,
                    ml: 2.2,
                    mt: -1,
                    fontSize: 16,
                    position: 'absolute',
                    backgroundColor: 'primary.main',
                  }}
                >
                  {totalQuantity}
                </Box>
                <Image
                  src="/images/cart.svg"
                  alt="cart"
                  width={24}
                  height={24}
                />
              </Box>
            </Link>
          </Box>
        </Box>
      </Box>
    </AppBar>
  );
};

export default Navbar;