js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

readd nav button

Browse Source
This commit is contained in:
konnorrogers
2023-10-02 12:20:29 -04:00
parent 74d5b4c3f4
commit 57194ed12d
3 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/layout-templates/app.css.njk
View File

@@ -17,6 +17,10 @@ wa-layout::part(header) {
background-color: var(--wa-color-white);
}
wa-layout::part(drawer__panel) {
height: 100%;
}
wa-layout[view="mobile"] {
background-color: var(--wa-color-white);
--menu-width: 0px;

3
docs/_includes/layout-templates/app.html.njk
View File

@@ -1,4 +1,7 @@
<wa-layout main-id="main-content" class="wa-theme-light">
<header slot="header">
<wa-icon-button name="list" style="font-size: 1.5rem" onclick="this.closest('wa-layout').showNavigation()"></wa-icon>
</header>
<wa-button href="#" variant="text" style="padding: 0 0.4rem" class="wa-button--logo wa-button--stretch wa-button--muted" size="large" slot="navigation-header">
<wa-icon name="music-note" slot="prefix" style="font-size: 2rem;"></wa-icon>
Musicify

7
src/components/layout/layout.component.ts
View File

@@ -76,6 +76,11 @@ export default class WaLayout extends WebAwesomeElement {
*/
@property({ attribute: 'mobile-breakpoint' }) mobileBreakpoint = 768;
/**
* Where to place the navigation when in the mobile viewport.
*/
@property({ attribute: 'navigation-placement', reflect: true }) navigationPlacement: 'start' | 'end' = 'start';
layoutResizeObserver = new ResizeObserver(entries => {
for (const entry of entries) {
if (entry.contentBoxSize) {
@@ -236,7 +241,7 @@ export default class WaLayout extends WebAwesomeElement {
</div>
</div>
<wa-drawer placement=${this.navigationPlacement} part="navigation-drawer" class="navigation-drawer">
<wa-drawer placement=${this.navigationPlacement} part="navigation-drawer" exportparts="panel:drawer__panel" class="navigation-drawer">
<slot slot="label" name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>
<slot name=${this.view === 'mobile' ? 'navigation' : '____'}></slot>
<slot slot="footer" name=${this.view === 'mobile' ? 'navigation-footer' : '___'}></slot>