Skip to content

Commit

Permalink
update header sample markup
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfellerph
gfellerph committed Dec 9, 2024
1 parent e897f77 commit 1aea1d2
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 41 deletions.
31 changes: 25 additions & 6 deletions packages/components/src/components/post-header/post-header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Component, h, Host, State, Element, Listen } from '@stencil/core';
import { throttle } from 'throttle-debounce';
import { version } from '@root/package.json';
import { SwitchVariant } from '@/components';

type DEVICE_SIZE = 'mobile' | 'tablet' | 'desktop' | null;

@Component({
tag: 'post-header',
Expand All @@ -9,7 +12,7 @@ import { version } from '@root/package.json';
})
export class PostHeader {
@Element() host: HTMLPostHeaderElement;
@State() device: 'mobile' | 'tablet' | 'desktop' = null;
@State() device: DEVICE_SIZE = null;
@State() mobileMenuExtended: boolean = false;

private scrollParent = null;
Expand Down Expand Up @@ -67,17 +70,33 @@ export class PostHeader {
}

private handleResize() {
const previousDevice = this.device;
let newDevice: DEVICE_SIZE;
const width = window?.innerWidth;

if (width >= 1024) {
this.device = 'desktop';
newDevice = 'desktop';
this.mobileMenuExtended = false; // Close any open mobile menu
} else if (width >= 600) {
this.device = 'tablet';
newDevice = 'tablet';
} else {
this.device = 'mobile';
newDevice = 'mobile';
}

// Apply only on change for doing work only when necessary
if (newDevice !== previousDevice) {
this.device = newDevice;
window.requestAnimationFrame(() => {
this.switchLanguageSwitchMode();
});
}
}

private switchLanguageSwitchMode() {
const variant: SwitchVariant = this.device === 'desktop' ? 'dropdown' : 'list';
this.host.querySelector('post-language-switch')?.setAttribute('variant', variant);
}

private handleMobileMenuToggle() {
this.mobileMenuExtended = !this.mobileMenuExtended;
}
Expand All @@ -99,7 +118,7 @@ export class PostHeader {
<div class="global-sub">
{this.device === 'desktop' && <slot name="meta-navigation"></slot>}
<slot name="global-controls"></slot>
{this.device === 'desktop' && <slot name="post-language-switch-2"></slot>}
{this.device === 'desktop' && <slot name="post-language-switch"></slot>}
<div onClick={() => this.handleMobileMenuToggle()} class="mobile-toggle">
<slot name="post-togglebutton"></slot>
</div>
Expand All @@ -120,7 +139,7 @@ export class PostHeader {
<slot name="meta-navigation"></slot>
)}
{(this.device === 'mobile' || this.device === 'tablet') && (
<slot name="post-language-switch-2"></slot>
<slot name="post-language-switch"></slot>
)}
</div>
</Host>
Expand Down
45 changes: 23 additions & 22 deletions packages/components/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,41 @@
</head>
<body style="min-height: 200vh">
<post-header>
<!-- Logo -->
<post-logo>Homepage</post-logo>
<ul slot="audience-navigation">
<li><a href="">Privatkunden</a></li>
<li><a href="">Geschäftskunden</a></li>
<li><a href="">Behörden</a></li>
</ul>
<ul slot="meta-navigation">

<!-- Meta navigation -->
<ul class="list-inline" slot="meta-navigation">
<li><a href="">Über uns</a></li>
<li><a href="">Jobs</a></li>
</ul>

<button slot="post-togglebutton">= Menu</button>
<!-- Menu button for mobile -->
<post-toggle-button slot="post-togglebutton"> = Menu </post-toggle-button>

<ul slot="post-language-switch-2">
<li>
<a href="#">DE</a>
</li>
<li>
<a href="#">FR</a>
</li>
<li>
<a href="#">IT</a>
</li>
<li>
<a href="#">EN</a>
</li>
</ul>
<!-- Language switch -->
<post-language-switch
caption="Caption"
description="Description"
name="language-switch-example"
slot="post-language-switch"
>
<post-language-option active="true" code="de" name="Deutsch">DE</post-language-option>
<post-language-option active="false" code="fr" name="French">FR</post-language-option>
<post-language-option active="false" code="it" name="Italiano">IT</post-language-option>
<post-language-option active="false" code="en" name="English">EN</post-language-option>
</post-language-switch>

<!-- Application title (optional) -->
<h1 slot="title">Application title</h1>
<ul>

<!-- Custom content (optional) -->
<ul class="list-inline">
<li><a href="#">Search</a></li>
<li><a href="#">Login</a></li>
</ul>

<!-- Main navigation -->
<post-mainnavigation caption="Hauptnavigation">
<button slot="back-button"><- Back</button>
<post-list>
Expand Down
24 changes: 11 additions & 13 deletions packages/documentation/src/stories/components/header/components/header.markup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,17 @@ export default html`<post-header>
<post-toggle-button slot="post-togglebutton"> = Menu </post-toggle-button>
<!-- Language switch -->
<post-language-switch slot="post-language-switch">
<post-language-option>
<a href="#">DE</a>
</post-language-option>
<post-language-option>
<a href="#">FR</a>
</post-language-option>
<post-language-option>
<a href="#">IT</a>
</post-language-option>
<post-language-option>
<a href="#">EN</a>
</post-language-option>
<post-language-switch
caption="Caption"
description="Description"
variant="list"
name="language-switch-example"
slot="post-language-switch"
>
<post-language-option active="true" code="de" name="Deutsch">DE</post-language-option>
<post-language-option active="false" code="fr" name="French">FR</post-language-option>
<post-language-option active="false" code="it" name="Italiano">IT</post-language-option>
<post-language-option active="false" code="en" name="English">EN</post-language-option>
</post-language-switch>
<!-- Application title (optional) -->
Expand Down

0 comments on commit 1aea1d2

Please sign in to comment.