guys i have another problem with my blog

import { useState } from "react";

function Before({ sidebarButton }) {
    return (
        <div className="h-10 w-10 bg-accent mt-5 fixed" onClick={sidebarButton}></div>
    );
}

function Sidebar({ sidebarButton }) {
    return (
        <>
            <div className="fixed left-0 top-0 flex h-screen w-full sm:w-64 flex-col bg-primary p-5 text-center border-r z-10">
                <div onClick={sidebarButton}>close</div>
                <i className="text-4xl mb-10">Priyasakhi</i>
                <i className="underline underline-offset-2 pb-1 text-xl">About</i>
                <i className="underline underline-offset-2 pb-1 text-xl">All recepies</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Mains</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Snacks</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Breakfasts</i>
            </div>
        </>
    );
}

function Hehe() {
    const [sidebar, setSidebar] = useState(false);
    function Button() {
        setSidebar(!sidebar)
    }

    return (
        <>
            {sidebar ? <Sidebar sidebarButton={Button} /> : <Before sidebarButton={Button} />}
        </>
    );
}

export default Hehe;

import { useState } from "react";

function Before({ sidebarButton }) {
    return (
        <div className="h-10 w-10 bg-accent mt-5 fixed" onClick={sidebarButton}></div>
    );
}

function Sidebar({ sidebarButton }) {
    return (
        <>
            <div className="fixed left-0 top-0 flex h-screen w-full sm:w-64 flex-col bg-primary p-5 text-center border-r z-10">
                <div onClick={sidebarButton}>close</div>
                <i className="text-4xl mb-10">Priyasakhi</i>
                <i className="underline underline-offset-2 pb-1 text-xl">About</i>
                <i className="underline underline-offset-2 pb-1 text-xl">All recepies</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Mains</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Snacks</i>
                <i className="underline underline-offset-2 pb-1 text-xl">Breakfasts</i>
            </div>
        </>
    );
}

function Hehe() {
    const [sidebar, setSidebar] = useState(false);
    function Button() {
        setSidebar(!sidebar)
    }

    return (
        <>
            {sidebar ? <Sidebar sidebarButton={Button} /> : <Before sidebarButton={Button} />}
        </>
    );
}

export default Hehe;