feat(experimental): Navigation add new module

[waterplea]

Closes #

[lumberjack-bot]

Pull request was closed ✔️

All saved screenshots (for current PR) were deleted 🗑️

[bundlemon]

BundleMon

Files updated (2)

Status	Path	Size	Limits
✅	demo/browser/main.(hash).js	386.06KB (+1.4KB +0.36%)	+10%
✅	demo/browser/runtime.(hash).js	40.72KB (+80B +0.19%)	+10%

Unchanged files (3)

Status	Path	Size	Limits
✅	demo/browser/vendor.(hash).js	213.01KB	+10%
✅	demo/browser/polyfills.(hash).js	11.25KB	+10%
✅	demo/browser/styles.(hash).css	1.39KB	+10%

Total files change +1.48KB +0.23%

Groups updated (1)

Status	Path	Size	Limits
✅	demo/browser/*..js	2.37MB (+10.55KB +0.44%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[github-actions]

Visit the preview URL for this PR (updated for commit 0b1c03b):

https://taiga-ui--pr6827-navigation-nen7zyut.web.app

_{(expires Wed, 21 Feb 2024 11:18:43 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 4b5ece1e114386f6a105425ef799091475b249eb}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (v3.x@d6d06c9). Click here to learn what that means.

Additional details and impacted files

@@           Coverage Diff           @@
##             v3.x    #6827   +/-   ##
=======================================
  Coverage        ?   67.87%           
=======================================
  Files           ?      780           
  Lines           ?     9658           
  Branches        ?     1335           
=======================================
  Hits            ?     6555           
  Misses          ?     2882           
  Partials        ?      221           

Flag	Coverage Δ
addon-charts	71.52% <ø> (?)
addon-doc	60.58% <ø> (?)
addon-mobile	60.50% <ø> (?)
addon-table	60.75% <ø> (?)
addon-tablebars	∅ <ø> (?)
cdk	∅ <ø> (?)
core	∅ <ø> (?)
kit	70.28% <ø> (?)
summary	67.87% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[hakimio]

@waterplea some minor issues with the demo:

• there is an issue with the demo where content overflows when you scroll
• in the first demo there is some visual artifact (happens every time)
• shouldn't the navigation panel change color when switching between dark and light mode?

[waterplea]

@waterplea some minor issues with the demo:

• there is an issue with the demo where content overflows when you scroll
• in the first demo there is some visual artifact (happens every time)
• shouldn't the navigation panel change color when switching between dark and light mode?

1. That is just how demo components behave, this module is meant for the entire page so those will not be visible. We can probably just hack-hide padding in these particular examples if this bothers people :)
2. I think that is some Chrome rendering bug, I started seeing it in some other places a couple of weeks ago. There's no reason for it to be there, as far as I can tell, nor is it visible in Firefox. Not even in Chrome on MacOS for me.
3. That is how our design team drew it to be, and since there's nothing proprietary about this design and Taiga UI lacked global layout components and we plan to keep expanding in that area — we decided this design can be open sourced. You can control color of the navigation panel by --tui-theme-color variable since you would probably want it to fit within your corporate styles. By default it does not react to dark/light mode by design.