Add header toggle on mobile that works without JS #3

New issue

Open

opened 2025-04-10 23:13:04 +00:00 by Jeremy Kescher · 2 comments

Jeremy Kescher commented

2025-04-10 23:13:04 +00:00

Owner

No description provided.

Jeremy Kescher added the

enhancement

label 2025-04-10 23:13:04 +00:00

Jeremy Kescher added a new dependency 2025-04-10 23:13:24 +00:00

#2 Migrate header to bulma

sk commented

2025-04-11 08:48:30 +00:00

u might wanna do something like:

<header class="le-header">
  <input id="header-toggle" type="checkbox" aria-label="expand header">
  …

.le-header:has(#header-toggle[checked]) {
  /* le expanded */
}

u might wanna do something like: ```html <header class="le-header"> <input id="header-toggle" type="checkbox" aria-label="expand header"> … ``` ```css .le-header:has(#header-toggle[checked]) { /* le expanded */ } ```

sk commented

2025-04-11 08:55:32 +00:00

or, you might wanna consider using a popover or dialog for navigational controls:

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

or, you might wanna consider using a popover or dialog for navigational controls: ```html <button popovertarget="mypopover">Toggle the popover</button> <div id="mypopover" popover>Popover content</div> ``` see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API