Feature/add bottomnav component - Close #20

[Defkon1]

Added BottomNav component, with docs and tests

[Defkon1]

Close #20

[Copilot]

Pull request overview

This PR introduces a new BitBottomNav component to the BitBlazor UI kit, along with supporting storybook examples, documentation, and bUnit rendering tests to help consumers adopt a mobile-style bottom navigation pattern.

Changes:

• Added BitBottomNav and BitBottomNavItem implementation under src/BitBlazor/Components/BottomNav/.
• Added bUnit rendering coverage and BlazingStory stories/layout for showcasing the component.
• Added documentation page plus references in the docs index and quick reference.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
tests/BitBlazor.Test/Components/BottomNav/BitBottomNavTest.Rendering.razor	Adds rendering tests for default, badge, and alert variants.
stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor	Introduces a small layout wrapper for mobile-sized story rendering.
stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor.css	Provides basic styling/positioning for the mobile viewport layout and bottom-nav placement.
stories/BitBlazor.Stories/Components/Stories/Components/BitBottomNav.stories.razor	Adds stories demonstrating default, badges, alerts, and varying item counts.
src/BitBlazor/Components/BottomNav/BitBottomNavItem.cs	Defines the BottomNav item model (text/icon/link/badge/alert state).
src/BitBlazor/Components/BottomNav/BitBottomNav.razor.cs	Adds component parameters and CSS class composition helper.
src/BitBlazor/Components/BottomNav/BitBottomNav.razor	Implements the rendered markup for the bottom navigation list/items.
docs/README.md	Adds BottomNav to the components list in documentation index.
docs/quick-reference.md	Adds a quick-reference snippet for BottomNav usage.
docs/components/bottomnav.md	Adds the full BottomNav documentation page (usage, parameters, accessibility notes).
BitBlazor.sln	Includes the new BottomNav documentation page in the solution’s docs section.

Comments suppressed due to low confidence (2)

docs/components/bottomnav.md:36

• This table cell includes a raw '' HTML tag in Markdown. Because it's not closed, it can break the rest of the page rendering; it should be escaped or wrapped in backticks.

| `Link`     | `string?`  | `null`                | Optional URL for the item (<a href="...">).         |

docs/components/bottomnav.md:83

• These lines include raw '' and '' HTML tags in Markdown. Wrap them in backticks so they don't get parsed as HTML and potentially break formatting.

- `bottom-nav` — root container on the <nav> element.
- `active` — applied to an item's <a> when IsActive is true.

[albx]

@Defkon1 same here

[albx]

@Defkon1 I was wondering if this component should match the design of BitToolbar (checkout docs here).

The problem I see it's what if I don't want a component which triggers a page navigation but only a click event (like a sort of tab behavior for example). The solution I found (and up to now I'm still not sure it's the best solution) is control the single Item as a child component and specify both Href and OnClick event which works together (see https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs and https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor).

If you need help or simply talk about it let me know. Thank you for your contrib!

[Defkon1]

@Defkon1 I was wondering if this component should match the design of BitToolbar (checkout docs here).

The problem I see it's what if I don't want a component which triggers a page navigation but only a click event (like a sort of tab behavior for example). The solution I found (and up to now I'm still not sure it's the best solution) is control the single Item as a child component and specify both Href and OnClick event which works together (see https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs and https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor).

If you need help or simply talk about it let me know. Thank you for your contrib!

I refactored the BitBottomNavItem logic/UI in a separate component, and I adjusted its implementation following the BitToolbarItem in 58a9eb6.

However, I believe that for this type of components a choice must be made regarding the management of child components; we should opt for the approach of explicitly defining the children components, or we should favor the "enumerable list of items" way?

As far I can see you opted for the first with the BitToolbar, while I preferred the second one in BitBottomNav. I can see pros/cons in both ways, so I think we should just choose one standard and adhere to it...

[albx]

However, I believe that for this type of components a choice must be made regarding the management of child components; we should opt for the approach of explicitly defining the children components, or we should favor the "enumerable list of items" way?

@Defkon1 absolutely agree! I will figure out pros and cons of both methods and then we will find a common approach