jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show/hide mobile sidebar

Browse Source
This commit is contained in:
jude 2023-12-03 16:39:08 +00:00
parent 4fee936939
commit 4dc821bf73
3 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -29,33 +29,6 @@
<link rel="stylesheet" href="/static/css/dtsel.css"> <link rel="stylesheet" href="/static/css/dtsel.css">
</head> </head>
<body> <body>
<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">
<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"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
</nav>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/index.tsx"></script> <script type="module" src="/src/index.tsx"></script>
</body> </body>

53
src/components/Sidebar/MobileSidebar.tsx
View File

@ -1,7 +1,54 @@
import { useState } from "preact/hooks";
export const MobileSidebar = ({ children }) => { export const MobileSidebar = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
return ( return (
<div class="dashboard-sidebar mobile-sidebar is-hidden-desktop" id="mobileSidebar"> <>
{children} <nav
</div> 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">
<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 ? "block" : "none",
}}
>
{children}
</div>
</>
); );
}; };

1
src/components/Sidebar/index.tsx
View File

@ -5,7 +5,6 @@ import { Brand } from "./Brand";
import { Wave } from "./Wave"; import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry"; import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api"; import { fetchUserGuilds, GuildInfo } from "../../api";
import { useState } from "preact/hooks";
import { TimezonePicker } from "../TimezonePicker"; import { TimezonePicker } from "../TimezonePicker";
import { Import } from "../Import"; import { Import } from "../Import";