Page MenuHomeSealhub
Files F7511292

fullscreen-menu-demo.page.tsx
No OneTemporary
Actions

fullscreen-menu-demo.page.tsx
View Options

import type { Context } from "koa";
import { TempstreamJSX } from "tempstream";
import { Page } from "@sealcode/sealgen";
import html from "../html.js";
import { fullscreenMenu } from "./common/fullscreen-menu/fullscreen-menu.js";
export const actionName = "FullscreenMenuDemo";
export default new (class FullscreenMenuDemoPage extends Page {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async canAccess(_: Context) {
return { canAccess: true, message: "" };
}
async render(ctx: Context) {
return html(
ctx,
"FullscreenMenuDemo",
<div>
{
/* HTML */ `<style>
.fullscreen-menu__panel--panel_1 {
transform: translateX(-50vw); /* move that one to the left */
}
.fullscreen-menu label {
cursor: pointer;
font-weight: bold;
}
.fullscreen-menu__panel {
font-size: 20px;
display: flex;
flex-flow: column;
row-gap: 20px;
}
</style>`
}
{fullscreenMenu({
id: "demo",
panels: {
panel_1: (
<div>
PANEL 1. Click{" "}
<label for="demo__activate--panel_2">here</label> to go to
panel 2<div>And here's some description</div>
Go to{" "}
<label for="demo__activate--panel_3">
Very tall panel 3
</label>
</div>
),
panel_2: (
<div>
PANEL 2
<div>
<label for="demo__activate--panel_1">←Go back</label>
</div>
</div>
),
panel_3: (
<div style="display: flex; flex-flow: column; row-gap: 20px;">
<label for="demo__activate--panel_1">←Go back</label>
{[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
30,
].map((n) => (
<div>{n}</div>
))}
</div>
),
},
default_panel: "panel_1",
})}
<div style="display: flex; flex-flow: column; row-gap: 10px;">
<label for="demo--visible">Toggle menu via checkbox label</label>
<button onclick="demo.showModal()" type="button">
Toggle menu with javascript
</button>
</div>
<div style="height: 150vh">
This page is taaaaall - for testing reasons
</div>
</div>
);
}
})();

File Metadata

Mime Type
text/html
Expires
Mon, Jul 21, 00:19 (1 d, 5 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
829178
Default Alt Text
fullscreen-menu-demo.page.tsx (2 KB)

Event Timeline