Skip to content

Header: language and mobile menus that work without JS, add README - #12

Merged
TheSeydiCharyyev merged 1 commit into
mainfrom
navbar-readme
Oct 5, 2026
Merged

TheSeydiCharyyev merged 1 commit into
mainfrom
navbar-readme

Conversation

@TheSeydiCharyyev

Copy link
Copy Markdown
Member

Takes over #11 by @ahmedbatyrovv. His header design and his README stay; the fixes from the review on #11 are applied. Ahmed is a co-author of the commit.

Closes #5
Supersedes #11

What changes for visitors

  • New header (Ahmed's design): a language menu with flags, and a menu button on narrow screens.
  • Both menus work before the JavaScript loads. On a slow connection this takes several seconds.
  • Keyboard: a closed menu is not in the Tab order. Escape closes an open menu and returns focus to its button.

Fixes from the #11 review

  1. Flags load. They are in public/flags/, taken from lipis/flag-icons (MIT, license file included). The Turkmen flag is the official one, with the guls, the olive branches and the stars. It is a 60×45 PNG (2.5 KB), because the SVG is 38 KB and loads on every Turkmen page.
  2. Both menus are <details> / <summary>. Without JS they open and close, and a closed menu cannot get focus.
  3. HeaderMenus.tsx adds Escape, click outside, closing after a link in the mobile menu, and no page scroll while the mobile menu is open.
  4. The header is a server component again; only the small menu script goes to the browser. JS per page: 173.6 KB (main: 173.2 KB, Update navbar design and created README.md file #11: 174.5 KB).
  5. README: npm run check:size, the deploy section, the flag source.

One design change: the mobile menu had two close buttons, one in the panel and one on the dark area. Now there is one: the menu button turns into a close button on top of the dark area. It works without JS too.

Checked

  • npm run build and npm run check:size pass.
  • Chromium, desktop 1280 and phone 390: the flags load; every Tab stop is visible; Escape, a click outside, a tap on the dark area, a section link and the close button close the menus; a section link scrolls to the section; the page does not scroll while the mobile menu is open.
  • JavaScript off: on desktop the section links are visible; on desktop and phone both menus open and close.
  • Reduced motion: no transitions.
  • <main> of /, /ru/, /projects/ and the 404 page are pixel-identical to production.

Takes over #11: Ahmed's header design and README, with the fixes from
the review.

- Both menus are <details>/<summary>: they open without JS, and a closed
  menu is not in the Tab order. HeaderMenus adds Escape, click outside,
  closing after a link in the mobile menu, and the scroll lock.
- Flags from lipis/flag-icons (MIT). The Turkmen flag is a 60x45 PNG,
  because the SVG is 38 KB.
- README: npm run check:size, the deploy section, the flag source.

Co-authored-by: Ahmed Batyrov <[email protected]>
@TheSeydiCharyyev
TheSeydiCharyyev merged commit 40c7f0c into main Oct 5, 2026
2 checks passed
@TheSeydiCharyyev
TheSeydiCharyyev deleted the navbar-readme branch October 5, 2026 09:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add README for the site repository

1 participant