import { useState } from "preact/hooks";

export const MobileSidebar = ({ children }) => {
    const [sidebarOpen, setSidebarOpen] = useState(false);

    return (
        <>
            <nav
                class="navbar is-spaced is-size-4 is-hidden-desktop dashboard-navbar"
                role="navigation"
                aria-label="main navigation"
            >
                <div class="navbar-brand">
                    <a class="navbar-item" href="/">
                        <figure
                            class="image"
                            style={{
                                maxWidth: "28px",
                                maxHeight: "28px",
                                overflow: "hidden",
                                display: "flex",
                            }}
                        >
                            <img
                                width="28px"
                                height="28px"
                                src="/static/img/logo_nobg.webp"
                                alt="Reminder Bot Logo"
                            />
                        </figure>
                    </a>

                    <p class="navbar-item pageTitle"></p>

                    <a
                        role="button"
                        class="dashboard-burger navbar-burger is-right"
                        aria-label="menu"
                        aria-expanded="false"
                        data-target="mobileSidebar"
                        onClick={() => {
                            setSidebarOpen(!sidebarOpen);
                        }}
                    >
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>
            </nav>
            <div
                class="dashboard-sidebar mobile-sidebar is-hidden-desktop"
                id="mobileSidebar"
                style={{
                    display: sidebarOpen ? "inherit" : "none",
                }}
                onClick={() => {
                    setSidebarOpen(!sidebarOpen);
                }}
            >
                {children}
            </div>
        </>
    );
};