Repository navigation
Update navbar design and created README.md file - #11
ahmedbatyrovv wants to merge 1 commit into
Conversation
TheSeydiCharyyev
left a comment
There was a problem hiding this comment.
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:
-
Flags do not load. Header.tsx uses
/flags/tk.svg,/flags/ru.svg,/flags/gb.svg, but the files arepublic/tk.svg,public/ru.svg,public/gb.svg. In the built site all three images are broken. Move them topublic/flags/. -
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.svgfrom 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). -
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.
-
Escape does not close the language menu (it does close the mobile panel).
-
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.
- 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 addCloses #5to the PR description, so the issue closes on merge.
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]>
|
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:
Closing this PR. |
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.