components/Navbar/NavbarClientSide.tsx

"use client";

import useIsMobile from "@/hooks/useIsMobile";
import { Button } from "@mui/material";
import { useState } from "react";
import { MdMenu } from "react-icons/md";
import Drawer from "./Drawer";

export default function NavbarClientSide() {
    const isMobile = useIsMobile();
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            {isMobile && (
                <>
                    <div className="mobile order-first">
                        <Button
                            style={{ minWidth: 0, color: "white" }}
                            onClick={() => setIsOpen(true)}
                        >
                            <MdMenu size={23} />
                        </Button>
                    </div>

                    <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} />
                </>
            )}
        </>
    );
}
1	rakinar2	575	"use client";
2
3			import useIsMobile from "@/hooks/useIsMobile";
4			import { Button } from "@mui/material";
5			import { useState } from "react";
6			import { MdMenu } from "react-icons/md";
7			import Drawer from "./Drawer";
8
9			export default function NavbarClientSide() {
10			const isMobile = useIsMobile();
11			const [isOpen, setIsOpen] = useState(false);
12
13			return (
14			<>
15			{isMobile && (
16			<>
17			<div className="mobile order-first">
18			<Button
19			style={{ minWidth: 0, color: "white" }}
20			onClick={() => setIsOpen(true)}
21			>
22			<MdMenu size={23} />
23			</Button>
24			</div>
25
26			<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} />
27			</>
28			)}
29			</>
30			);
31			}