66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
};
|