Skip to content

Update navbar design and created README.md file - #11

Closed
ahmedbatyrovv wants to merge 1 commit into
mainfrom
design-navbar
Closed

ahmedbatyrovv wants to merge 1 commit into
mainfrom
design-navbar

Conversation

@ahmedbatyrovv

Copy link
Copy Markdown
Member

Updated the navbar design and improved its responsive layout.

Added a README.md file with project information.

Tested the changes locally and verified that the project builds successfully.

@TheSeydiCharyyev TheSeydiCharyyev left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new header looks good, and the build and the size check pass (+1.3 KB of JS). The README covers #5 well. Things to fix before merge:

  1. Flags do not load. Header.tsx uses /flags/tk.svg, /flags/ru.svg, /flags/gb.svg, but the files are public/tk.svg, public/ru.svg, public/gb.svg. In the built site all three images are broken. Move them to public/flags/.

  2. The Turkmen flag is not correct: the red stripe has no carpet guls and no olive branches, and there are five dots instead of five-pointed stars. A state flag must be exact. The UK flag is simplified too (the red diagonals are not offset). Please take all three from lipis/flag-icons (MIT license): flags/4x3/tm.svg, ru.svg, gb.svg from https://github.com/lipis/flag-icons/tree/main/flags/4x3 — and mention the source in the README. The current files are also about 8 KB each, and more than 90% of that is image-generator metadata (c2pa:manifest).

  3. Hidden elements get keyboard focus. On desktop, after the language button, Tab goes through 11 invisible stops before the page content: the 3 links of the closed language menu and 8 items of the closed mobile panel, which sits off-screen (x = -314). A closed menu and a closed panel must not be focusable.

  4. Escape does not close the language menu (it does close the mobile panel).

  5. Without JavaScript the header does not work: on a phone there are no section links at all (the menu button needs JS), and on any screen the language links are hidden. Before this PR they were plain links that worked at once. On a slow connection the JS takes several seconds to load, so many visitors will see the header in this state first.

One change fixes 3 and 5: build both menus on <details> and <summary>. A closed <details> keeps its content out of the Tab order, it opens without JS, and JS can still add closing on Escape and on a click outside.

  1. README: since #10 CI also runs npm run check:size (250 KB of JS per page), so "npm run build is the same as CI" is not complete; please add it. The last sentence ("Вручную не запускается, но можно…") contradicts itself. And please add Closes #5 to the PR description, so the issue closes on merge.

TheSeydiCharyyev added a commit that referenced this pull request Oct 5, 2026
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

Copy link
Copy Markdown
Member

Superseded by #12 (merged as 40c7f0c). Your header design and your README are in it, and you are a co-author of the commit.

What changed compared to this PR:

  • Flags come from lipis/flag-icons, so the Turkmen flag is the official one.
  • Both menus are <details> / <summary>: they work before the JavaScript loads, and a closed menu does not get keyboard focus.
  • Escape and a click outside close the menus.
  • The README has npm run check:size.

Closing this PR.

@TheSeydiCharyyev
TheSeydiCharyyev deleted the design-navbar 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.

2 participants