[COMPONENT] Local navigation bar

[henrikvoetmand]

• I have written a good issue

Describe the solution you'd like

This issue is for Pre tech-refinement of a new component that we should evaluate.

I will call in for a short presentation...

Have you considered any alternatives?

Are there any additional context?

https://material.io/components/tabs#usage

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined; do not proceed until this is done.
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the stable branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".

[alxzak]

This issue should be prioritized for development during sprint 10.

[RasmusKjeldgaard]

Early Tech Refinement

This components functionality seems similar to the existing kirby-tab-bar component, but the styling differs quite a lot. Based on this, one of the major tasks of our initial research is to determine if local navigation should:

1. be its own component
2. be baked into the Tabs component somehow
3. utilise shared functionality and/or sub-components between tabs and local navigation components where possible.

Identified Requirements

1. Consumers should be able to create a local navigation bar (tab bar?) with a set of buttons, ideally declaratively like so:

<kirby-local-navigation>
    <kirby-local-navigation-button>
        Home
    </kirby-local-navigation-button>
    <kirby-local-navigation-button>
        Inbox
    </kirby-local-navigation-button>
    <kirby-local-navigation-button>
        Messages
    </kirby-local-navigation-button>
</kirby-local-navigation>

2. Consumers should have a way to register a component or route to be shown when a local navigation button is pressed.
3. Visually, the local navigation should fill out the whole width of its container, and become scrollable when more buttons are present outside the view. The actual scroll behavior should be determined - see question below.

Further Questions

• Is local navigation the correct name for this component?
• Understand the current functionality of tab bar. Why is it implemented with a router outlet inside the component? Is it possible to hand over control to consumer apps, that could themselves put a router outlet in the template?
• How should the scrolling work? We talked about the tab bar scrolling itself along on click on the rightmost buttons - but should it also be scrollable itself?
• How to handle routing - ideally this should not be baked into the component in a similar way as the Tabs component. Can we instead make it possible for consumers to register

Initial solution sketching

One approach we discussed is to separate the existing tabs components into more distinct sub-components with a better defined responsibility, with a DOM-structure like this:

<kirby-tabs>
    <kirby-tab-bar>
        <kirby-tab-button>
            Home
        </kirby-tab-button>
    </kirby-tab-bar>
</kirby-tabs>

This way, the <kirby-tabs> component could support the current behavior of wrapping a router outlet and showing different routes inside the component itself, while the tab-bar becomes its own component only concerned with layout and grouping of the nested buttons.

[RasmusKjeldgaard]

https://carbondesignsystem.com/components/tabs/usage/
https://material.io/components/tabs

Two good examples of what we want.