rubix/src/components/MobileMenu/MobileMenu.jsx

/* eslint-disable no-unused-vars */
import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  IconButton,
  Text,
} from "@chakra-ui/react";
import { Box, Image } from "@chakra-ui/react";
import { Link, useLocation } from "react-router-dom";
import { Button } from "@chakra-ui/react";
// import { HashLink } from "react-router-hash-link";
import logo from "../../assets/images/rubix.png";
import { useEffect, useState } from "react";
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";

export const MobileMenu = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  const location = useLocation();
  const { data } = useGetUseCaseQuery();
  // console.log(data);
  const useCase = data?.data?.rows;
  // console.log(useCase);

  const highlight = {
    color: "rgb(222, 133, 142)",
  };

  const normal = {
    color: "#fff",
  };

  const handleClick = () => {
    setMenu(!menu);
  };

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsScrolled(scrollPosition > 0);
    };

    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  const linkStyle = {
    color: "#fff",
    display: "block",
    padding: "15px 0",
  };

  const innerLink = {
    color: location.pathname === "/LearnPage" ? "rgb(222, 133, 142)" : "#fff",
    display: "block",
    padding: "15px 0",
  };

  return (
    <>
      <Box
        id="navbar"
        position={"fixed"}
        top={"0px"}
        zIndex={888}
        backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
        display={"flex"}
        justifyContent={"space-between"}
        alignItems={"center"}
        width={"100%"}
        padding={"2rem 1rem"}
        // paddingTop={"3rem"}
        sx={{
          "@media (max-width: 1024px)": {},
          "@media (max-width: 375px)": {
            padding: "1rem",
            alignItems: "baseline",
          },
        }}
      >
        <Box display={"flex"} alignItems={"center"}>
          <Link to="/">
            <Box
              display={"flex"}
              alignItems={"baseline"}
              justifyContent={"center"}
            >
              <Image src={logo} width={"160px"} />
            </Box>
          </Link>
        </Box>
        <HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
      </Box>

      <Box
        position={"fixed"}
        top={"0px"}
        transform={menu ? "translateX(0)" : "translateX(100%)"}
        transition={"all 0.6s ease-in-out"}
        zIndex={999}
        backgroundColor={"#101015"}
        height={"100vh"}
        width={"100%"}
        overflow={"auto"}
        opacity={menu ? 1 : 0}
      >
        <Box
          // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
          display={"flex"}
          justifyContent={"space-between"}
          alignItems={"center"}
          padding={"2rem 1rem"}
          marginBottom={"1rem"}
          gap={"2rem"}
          sx={{
            "@media (max-width: 1024px)": {},
            "@media (max-width: 375px)": {
              padding: "1rem",
              alignItems: "baseline",
            },
          }}
        >
          <Box display={"flex"} alignItems={"center"}>
            <Link to="/" onClick={handleClick}>
              <Box
                display={"flex"}
                alignItems={"baseline"}
                justifyContent={"center"}
              >
                <Image src={logo} width={"160px"} />
              </Box>
            </Link>
          </Box>
          <CloseIcon color={"#fff"} fontSize={"16px"} onClick={handleClick} />
        </Box>

        <Accordion allowToggle>
          {/* Learn */}
          <AccordionItem borderTop={"none"} padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  LEARN
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/LearnPage" style={innerLink} onClick={handleClick}>
                Learn
              </Link>
              <Link
                to="https://learn.rubix.net/pop/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Proof-of-pledge Protocol
              </Link>
              <Link
                to="https://learn.rubix.net/smartcontract/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Smart Contracts
              </Link>
              <Link
                to="https://learn.rubix.net/tokenomics/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Tokenomics in Rubix
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* Build */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  BUILD
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/BuildPage" style={innerLink} onClick={handleClick}>
                Build
              </Link>
              <Link
                to="https://learn.rubix.net/node-setup/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Set up Rubix Node
              </Link>
              <Link
                to="https://learn.rubix.net/quorum/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Quorum
              </Link>
              <Link
                to="https://learn.rubix.net/subnets/"
                // target="_blank"
                // rel="noopener noreferrer"
                onClick={handleClick}
                style={linkStyle}
              >
                Subnets
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* UseCases */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  USE CASES
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              {useCase?.map((slug) => (
                <Box key={slug.id} style={{ flexBasis: "calc(50% - 1rem)" }}>
                  <Link
                    to={`/${slug.title_slug}`}
                    className="link"
                    style={
                      location.pathname === `/${slug.title_slug}`
                        ? highlight
                        : normal
                    }
                    onClick={handleClick}
                  >
                    <Box
                      display={"flex"}
                      alignItems={"center"}
                      justifyContent={"start"}
                      gap={"1rem"}
                      marginBottom={"1rem"}
                    >
                      <Text>{slug.title}</Text>
                    </Box>
                  </Link>
                </Box>
              ))}
              {/* <Link to="/fin-tech" style={innerLink} onClick={handleClick}>
                FinTech
              </Link>
              <Link
                to="/ad-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                AdTech
              </Link>
              <Link
                to="/mar-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                MarTech
              </Link>
              <Link
                to="/health-tech"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                HealthTech
              </Link>
              <Link
                to="/identity-security"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                Identity and Security
              </Link>
              <Link
                to="/Telecom"
                // target="_blank"
                // rel="noopener noreferrer"
                style={innerLink}
                onClick={handleClick}
              >
                Telecom
              </Link> */}
            </AccordionPanel>
          </AccordionItem>

          {/* Community */}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  COMMUNITY
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link to="/community" style={innerLink} onClick={handleClick}>
                Community
              </Link>
              <Link to="/news" style={innerLink} onClick={handleClick}>
                News & Articles
              </Link>
              <Link
                to="/resources-page"
                style={innerLink}
                onClick={handleClick}
              >
                Resources
              </Link>
              <Link to="/events" style={innerLink} onClick={handleClick}>
                Events
              </Link>
              <Link to="/ecosystem" style={innerLink} onClick={handleClick}>
                EcoSystem
              </Link>
            </AccordionPanel>
          </AccordionItem>

          {/* Wallet*/}
          <AccordionItem padding={"1rem 1rem"}>
            <AccordionButton>
              <Box as="span" flex="1" textAlign="left">
                <Text
                  color={"#B0B0B0"}
                  fontFamily={"Mona Sans"}
                  fontWeight={"500"}
                  fontSize={"16px"}
                >
                  AFFILIATES
                </Text>
              </Box>
              <AccordionIcon color={"#fff"} fontSize={"28px"} />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <Link
                to="https://getfexr.com/"
                onClick={handleClick}
                style={linkStyle}
              >
                Wallet
              </Link>
              <Link
                to="https://rubixexplorer.com/"
                onClick={handleClick}
                style={linkStyle}
              >
                Explore
              </Link>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>

        <Link to="/Contact" onClick={handleClick}>
          <Button
            margin={"2rem 2rem"}
            padding={"1.5rem 2rem"}
            borderRadius="0px"
            backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
          >
            CONTACT US
          </Button>
        </Link>
      </Box>
    </>
  );
};