Feature/local navigation

[RasmusTraeholt]

Which issue does this PR close?

This PR closes #2186

What is the new behavior?

Added two new experimental features.

1. A new kirby-page directive [kirbyPageStickyContent] which allows custom content to be inserted between the kirby-page-title and the kirby-page-content. That will become fixed beneath the ion-header, when scrolling to its intersection point.
2. A new local-navigation component <kirby-page-local-navigation> that can be used in conjunction with the new kirby-page directive.

Other:

• A new KirbyExperimentalModule in the designsystem has been introduced in which experimental components can be declared and exposed.
• A new ExperimentalExamplesModule along with a new route /examples/experimental/[path-to-experiment] has been introduced in the cookbook app in which experimental features can be created and viewed (the new route does not have a ui link)

Does this PR introduce a breaking change?

• Yes
• No

Are there any additional context?

Checklist:

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

Reminders

• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Make sure you have updated the cookbook with examples and showcases (for bug fixes, enhancements & new components).

Review

• Do a self-review.
• Request that the changes are code-reviewed
• Request that the changes are UX reviewed (only necessary if your PR introduces visual changes)

When the pull request has been approved it will be merged to develop by Team Kirby.

[jkaltoft]

I'm on vacation next week so I've approved the changes in advance 🙂

If you have any questions or comments we can follow up on it the week after next week.

[RasmusTraeholt]

I'm guessing this solution was chosen because we need the border to exceed the width of .container on narrow viewports, but I'm not completely sure. By looking at the code itself it's not immediately obvious why it can't be done with just a 1-line border-bottom declaration on .container.

Theres a bit more too it than just breaking constraints. The selected bottom border itself needs to have rounded corners (on all four), which is also part of the reason that it is not "just" a bottom border.

[RasmusTraeholt]

* When using a solution based more or less entirely on a blog post or similar add a reference to the source(s). They can provide context and explain the solutions and the problems they solve in more detail than what fits in a comment 🙂

What solutions are you referring too?

For example, https://css-tricks.com/bold-on-hover-without-the-layout-shift/ has a good description of the same technique that you're using to avoid layout shifts when using bold text as hover effect.

Nice find. I won't reference something i did not see or base my solution on though. But i can extend the explanation a bit :)
I believe i saw a comment on stackoverflow with a suggestion to insert a pseudo-element to avoid layout shifts. But the question it was posted to had very little in common with what i wanted to achieve. So i wont reference that either, since it could cause more confusion than relevant context.

[jkaltoft]

Good work, Rasmus 👍🏻

The only thing left is to undo bumping the version number.

[henrikvoetmand]

UX/UI review is OK!
There might be adjustments when we align with Toolbar component.

[mictro]

It seems to look good to all of us....