feat(design): improve sidebar component

[xelaint]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

1. Sidebar is missing focus trapping. Users currently need to tab through the page to move focus into sidebar.
2. Sidebar is missing custom header and footer components
3. No documentation on sidebar features and usage

Fixes: #277, #2554

What is the new behavior?

1. Add focus trapping behavior to sidebar so that focus moves to the first focusable element within a sidebar, specifically for over and under modes.
2. Clean up animation and sidebar visibility so that closed sidebars are not focusable.
3. Create sidebar header that includes a close button that can be hidden, a header title, and custom slotting for additional content. Add closeSidebar() method to header to link closing code to the close button.
4. Create sidebar footer and add body div so that content in body can overflow naturally while allowing footer to stay at bottom of screen.
5. Clean up design land sidebar
6. Extensive documentation on sidebar features and usage

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

[xelaint]

This PR is dependent on #2570

[damienwebdev]

Documentation

• Indicate the optionality of sidebar header and footer in docs.
• Document class props of sidebar header
• Document usage of Sidebar nav in various contexts.
• Figure out the demo of the sidebar nav in different spots.
• Read docs a few a times.
• Add documentation about importing BrowserAnimationsModule or NoopAnimationsModule to use sidebar
• Add documentation of sidebar with anchor scrolling element within body

Bugs

• Right sidebar has a horizontal scroll bar in over/under
• Anchor scrolling on page doesn't work because height is set on <daff-sidebar-viewport>. Solution is to set height on <daff-sidebar-viewport> only if sidebar is open and mode is under or over

API Considerations

• Remove button from header, add slots instead.
• Replace title with an ngIf

Tests

• Test focusing code

Legibility

• Review the clarity of the updateAnimationState in the sidebar viewport

[xelaint]

• Clean up the sidebar viewport animation legibility
• Add an example with sticky content
• Height shift in examples for over and under sidebars
• Make nav a separate animated block to prevent focus from scrolling page back to top
• Make over and under sidebars position: fixed
• Figure out how to stop body scroll when over and under sidebars are open without interferring with body height

[xelaint]

@damienwebdev I've updated navDesign to navPlacement and added documentation for this. This PR is good to go after you add your portion of the documentation.

In terms of showing the examples for navPlacement, the styles we have for a daff-sidebar-viewport that is inside of another daff-sidebar-viewport is preventing me from adding a working example of navPlacement="above" within the sidebar docs.