diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index f45b7ce7b..733b36dfa 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -85,7 +85,7 @@ - +
{# Logo #}
@@ -93,6 +93,7 @@ + {% include "logo.njk" %} {% include "logo-simple.njk" %} diff --git a/docs/_includes/page-demo.njk b/docs/_includes/page-demo.njk index ccbd1fda9..6a02577f3 100644 --- a/docs/_includes/page-demo.njk +++ b/docs/_includes/page-demo.njk @@ -6,7 +6,7 @@ Slots
{% for slot in slots %} - {% if slot.name != "skip-to-content" %} + {% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %} {{ slot.name or "(default)" }} diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md index f801f66aa..e6e1e9fc7 100644 --- a/docs/docs/components/page.md +++ b/docs/docs/components/page.md @@ -46,7 +46,7 @@ The following sections of a page are "sticky" by default, meaning they remain in - `banner` - `header` - `sub-header` -- `navigation` (or `menu`) +- `menu` (`navigation` itself is not sticky, but its parent `menu` is) - `aside` This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky. @@ -795,4 +795,4 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and padding: 1.5rem; } -``` +``` \ No newline at end of file diff --git a/src/components/page/page.styles.ts b/src/components/page/page.styles.ts index 0a62e4f07..fdccdd1fe 100644 --- a/src/components/page/page.styles.ts +++ b/src/components/page/page.styles.ts @@ -48,6 +48,7 @@ export default css` flex-wrap: wrap; gap: var(--wa-space-m); padding: var(--wa-space-m); + flex: 1 1 auto; } ::slotted([slot='subheader']) { @@ -169,6 +170,12 @@ export default css` } [part~='header'] { top: var(--banner-height); + + /** Make the header flex so that you don't unexpectedly have the default toggle button appearing above a slotted div because block elements are fun. */ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; } [part~='subheader'] { top: calc(var(--header-height) + var(--banner-height)); @@ -246,12 +253,34 @@ export default css` [part~='drawer']::part(dialog) { background-color: var(--wa-color-surface-default); } + + /* Set these on the slot because we don't always control the navigation-toggle since that may be slotted. */ + slot[name~='navigation-toggle'], + :host([disable-navigation-toggle]) slot[name~='navigation-toggle'] { + display: none; + } + + /* Sometimes the media query in the viewport is stubborn in iframes. This is an extra check to make it behave properly. */ + :host(:not([disable-navigation-toggle])[view='mobile']) slot[name~='navigation-toggle'] { + display: contents; + } + + [part~='navigation-toggle'] { + /* Use only a margin-inline-start because the slotted header is expected to have default padding so it looks really awkward if this sets a margin-inline-end and the slotted header has a padding-inline-start. */ + margin-inline-start: var(--wa-space-m); + } `; export const mobileStyles = (breakpoint: number) => ` @media screen and ( max-width: ${(Number.isSafeInteger(breakpoint) ? breakpoint.toString() : '768') + 'px'} ) { - [part~='navigation'] { display: none; } + [part~='navigation'] { + display: none; + } + + :host(:not([disable-navigation-toggle])) slot[name~='navigation-toggle'] { + display: contents; + } } `; diff --git a/src/components/page/page.ts b/src/components/page/page.ts index eb936c409..a2b5553ba 100644 --- a/src/components/page/page.ts +++ b/src/components/page/page.ts @@ -36,6 +36,8 @@ if (typeof ResizeObserver === 'undefined') { * @slot navigation-header - The header for a navigation area. On mobile this will be the header for ``. * @slot navigation - The main content to display in the navigation area. This is displayed on the left side of the page, if `menu` is not used. This section "sticks" to the top as the page scrolls. * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for ``. + * @slot navigation-toggle - Use this slot to slot in your own button + icon for toggling the navigation drawer. By default it is a `` + a 3 bars `` + * @slot navigation-toggle-icon - Use this to slot in your own icon for toggling the navigation drawer. By default it is 3 bars ``. * @slot main-header - Header to display inline above the main content. * @slot main-footer - Footer to display inline below the main content. * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls. @@ -48,8 +50,11 @@ if (typeof ResizeObserver === 'undefined') { * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation. * @csspart body - The wrapper around menu, main, and aside. * @csspart menu - The left hand side of the page. Generally intended for navigation. + * @csspart navigation - The `
+ + + + + + +