Navbar

import {
  Navbar,
  BrandLogo,
  NavbarContainer,
  NavbarActionGroup,
  NavItemsDropdown,
  NavItemsDropdownItems,
  NavItemsMenu,
  NavigationMenuCombo,
} from "@govtechmy/myds-react/navbar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@govtechmy/myds-react/select";
import React, { useState } from "react";
import { clx } from "@govtechmy/myds-react/utils";
import {
  GlobeIcon,
  MoonIcon,
  SearchIcon,
  SunIcon,
} from "@govtechmy/myds-react/icon";
import { Button } from "@govtechmy/myds-react/button";
import React, { useState } from "react";

export default () => {
  const [isDarkMode, setIsDarkMode] = useState<boolean>(true);
  const [value, setValue] = useState<string>("EN");
  const [showMenu, setMenu] = useState<boolean>(false);
 
  const handleToggle = () => {
    setIsDarkMode(!isDarkMode);
  };
 
  return (
    <Navbar showMenu={showMenu} className="px-2">
      <NavbarContainer>
        <BrandLogo imageSrc="https://d2391uizq0pg2.cloudfront.net/common/logo.svg">
          MYDS
        </BrandLogo>
 
        <NavigationMenuCombo showMenu={showMenu} setMenu={setMenu}>
          <NavItemsMenu href="/menu1" active={false}>
            <div>Menu 1</div>
          </NavItemsMenu>
          <NavItemsMenu href="/menu2" active={false}>
            Menu 2
          </NavItemsMenu>
          <NavItemsDropdown menu="Menu Dropdown">
            <NavItemsDropdownItems href="/submenu1">
              Submenu 1
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu2">
              Submenu 2
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu3">
              Submenu 3
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu1">
              Submenu 4
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu2">
              Submenu 5
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu3">
              Submenu 6
            </NavItemsDropdownItems>
            <NavItemsDropdownItems href="/submenu3">
              Submenu 7
            </NavItemsDropdownItems>
          </NavItemsDropdown>
          <NavItemsMenu href="/menu3" active={false}>
            Menu 3
          </NavItemsMenu>
        </NavigationMenuCombo>
      </NavbarContainer>
 
      <NavbarActionGroup showMenu={showMenu} setMenu={setMenu}>
        <Button variant="default-ghost" className="p-2">
          <SearchIcon></SearchIcon>
        </Button>
 
        <Button variant="default-ghost" className="p-2" onClick={handleToggle}>
          {isDarkMode ? <SunIcon /> : <MoonIcon />}
        </Button>
 
        <Select
          value={value}
          onValueChange={setValue}
          defaultValue="EN"
          multiple={false}
          variant="outline"
          size="medium"
        >
          <SelectTrigger>
            <GlobeIcon className="h-4 w-4"></GlobeIcon>
            <SelectValue>{(value) => value || "EN"}</SelectValue>
          </SelectTrigger>
          <SelectContent className="font-body rounded-[4px] py-1">
            <SelectItem value="EN">EN</SelectItem>
            <SelectItem value="BM">BM</SelectItem>
          </SelectContent>
        </Select>
      </NavbarActionGroup>
    </Navbar>
  );
};