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	"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	}