-Shown in app installer, Windows Partner Center, the "Report an app" option in the Store, and the "Write a review" option in the Store.
+Shown in app installer, Microsoft Partner Center, the "Report an app" option in the Store, and the "Write a review" option in the Store.
- 50x50
- 63x63 (1.25x scale)
diff --git a/apps/blog/src/docs/windows/next-steps/next-steps.md b/apps/blog/src/docs/windows/next-steps/next-steps.md
index 26978a133..a2d47757b 100644
--- a/apps/blog/src/docs/windows/next-steps/next-steps.md
+++ b/apps/blog/src/docs/windows/next-steps/next-steps.md
@@ -46,9 +46,10 @@ Your zip file [contains 2 app packages](/docs/what-is-a-classic-package/):
- `{app name}.msixbundle` - the main app package
- `{app name}.classic.appxbundle` - app package that allows users on older versions of Windows (below 10.0.19041, May 2020 Update) to run your app. See our [classic app package explainer](/docs/what-is-a-classic-package/) for details.
-Both packages can be submitted directly to the Microsoft Store through the [Windows Partner Center](https://partner.microsoft.com/dashboard)
+Both packages can be submitted directly to the Microsoft Store through the [Microsoft Partner Center](https://partner.microsoft.com/dashboard)
When you're ready to publish to the Store, you can either
+
- [Publish a new app in the Store](/docs/publish-a-new-app-to-the-microsoft-store/)
- [Update an existing app in the Store](/docs/update-an-existing-app-in-the-microsoft-store/)
diff --git a/apps/blog/src/docs/windows/publish-new-windows-app/publish-new-windows-app.md b/apps/blog/src/docs/windows/publish-new-windows-app/publish-new-windows-app.md
index 2642af6ea..7db466b07 100644
--- a/apps/blog/src/docs/windows/publish-new-windows-app/publish-new-windows-app.md
+++ b/apps/blog/src/docs/windows/publish-new-windows-app/publish-new-windows-app.md
@@ -22,7 +22,7 @@ This guide shows how to publish your PWA as a new app in the Store. If you alrea
## Enroll in Windows developer program
-Login to [Windows Partner Center](https://partner.microsoft.com/dashboard) with your Microsoft account.
+Login to [Microsoft Partner Center](https://partner.microsoft.com/dashboard) with your Microsoft account.
Then, go to your [dashboard](https://partner.microsoft.com/en-us/dashboard/home) to see your enrolled programs. If `Windows & Xbox` is listed, great, you're already enrolled. If not, choose `Add program`: 
diff --git a/apps/blog/src/docs/windows/update-existing-app/update-an-existing-app.md b/apps/blog/src/docs/windows/update-existing-app/update-an-existing-app.md
index 260b23e0c..a8e36901c 100644
--- a/apps/blog/src/docs/windows/update-existing-app/update-an-existing-app.md
+++ b/apps/blog/src/docs/windows/update-existing-app/update-an-existing-app.md
@@ -22,7 +22,7 @@ This guide shows how to publish your PWA as an update to an existing app in the
## Choose the app you want to update
-Login to [Windows Partner Center](https://partner.microsoft.com/dashboard), then go to `Windows & Xbox` -> `Overview`. Your existing apps will be listed:
+Login to [Microsoft Partner Center](https://partner.microsoft.com/dashboard), then go to `Windows & Xbox` -> `Overview`. Your existing apps will be listed:
diff --git a/apps/blog/src/docs/windows/windows-store-documentation/windows-store-documentation.md b/apps/blog/src/docs/windows/windows-store-documentation/windows-store-documentation.md
index 41e735d6f..12beccac7 100644
--- a/apps/blog/src/docs/windows/windows-store-documentation/windows-store-documentation.md
+++ b/apps/blog/src/docs/windows/windows-store-documentation/windows-store-documentation.md
@@ -26,7 +26,7 @@ Both the Microsoft Store and Windows itself natively supports PWAs as first-clas
Follow these steps to get your PWA listed in the Microsoft Store:
-1. Reserve an app name in the [Windows Partner Center](https://partner.microsoft.com/dashboard) as explained in this documentation [Publish your Progressive Web App to the Microsoft Store](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store)
+1. Reserve an app name in the [Microsoft Partner Center](https://partner.microsoft.com/dashboard) as explained in this documentation [Publish your Progressive Web App to the Microsoft Store](https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/microsoft-store)
2. Create your Microsoft Store app package on [PWA Builder](https://www.pwabuilder.com)
3. Follow [the Next steps for getting your PWA into the Microsoft Store](/docs/next-steps-for-getting-your-pwa-into-the-microsoft-store/)
diff --git a/apps/pwabuilder-chromium-extension/src/components/package-windows.ts b/apps/pwabuilder-chromium-extension/src/components/package-windows.ts
index c6a0dcf12..06996af48 100644
--- a/apps/pwabuilder-chromium-extension/src/components/package-windows.ts
+++ b/apps/pwabuilder-chromium-extension/src/components/package-windows.ts
@@ -10,11 +10,11 @@ import '@shoelace-style/shoelace/dist/components/tooltip/tooltip';
@customElement("package-windows")
export class PackageWindows extends LitElement {
- @state() currentManiUrl: string | undefined = undefined;
- @state() windowsOptions: WindowsOptions | undefined = undefined;
-
- static styles = [
- css`
+ @state() currentManiUrl: string | undefined = undefined;
+ @state() windowsOptions: WindowsOptions | undefined = undefined;
+
+ static styles = [
+ css`
:host {
display: block;
}
@@ -45,144 +45,144 @@ export class PackageWindows extends LitElement {
justify-content: space-between;
}
`,
- ];
-
- private _siteData!: SiteData;
-
- @property()
- get siteData(): SiteData {
- return this._siteData;
- }
-
- set siteData(val: SiteData) {
- const oldValue = this._siteData;
- this._siteData = val;
-
- if (this._siteData && this._siteData.currentUrl && this._siteData.manifest.hasManifest) {
- this.currentManiUrl = this._siteData.manifest.manifestUri;
- const manifest = this._siteData.manifest.manifest;
-
- if (manifest) {
- // set options we can find in manifest
- this.setUpOptions(
- this._siteData.currentUrl,
- manifest.name || manifest.short_name || "My App",
- "",
- "",
- "",
- true,
- "",
- ""
- );
- }
- }
+ ];
+
+ private _siteData!: SiteData;
- this.requestUpdate();
- }
-
-
- private async packageForWindows(options: any): PromisePackage for The Microsoft Store
Documentation @@ -193,7 +193,7 @@ export class PackageWindows extends LitElement {
The Package ID uniquely identifying your app in the Microsoft Store.
- Get this value from Windows Partner Center.
+ Get this value from Microsoft Partner Center.
-
-
-
- ${this.renderFormInput({
- label: 'Enable',
- tooltip: 'If enabled, your download will include the source code for your Android app.',
- inputId: 'include-src-input',
- type: 'checkbox',
- checked: this.packageOptions.includeSourceCode === true,
- inputHandler: (_, checked) => this.packageOptions.includeSourceCode = checked
- })}
-
-
- 
+ All Settings
All Settings
-
+ All Settings
@@ -566,44 +472,46 @@ export class AndroidForm extends AppPackageFormBase {
-
-
+
+
- ${this.renderFormInput({
- label: 'Standalone',
- tooltip: 'Recommended for most apps. The Android status bar and navigation bar will be shown while your app is running.',
- tooltipLink: 'https://developer.android.com/training/system-ui/immersive',
- inputId: 'display-standalone-input',
- type: 'radio',
- name: 'displayMode',
- value: 'standalone',
- checked: this.packageOptions.display === 'standalone',
- inputHandler: () => this.packageOptions.display = 'standalone'
- })}
-
+
${this.renderFormInput({
- label: 'Fullscreen',
- tooltip: `The Android status bar and navigation bar will be hidden while your app is running. Suitable for immersive experiences such as games or media apps.`,
- tooltipLink: 'https://developer.android.com/training/system-ui/immersive#immersive',
- inputId: 'display-fullscreen-input',
- type: 'radio',
- name: 'displayMode',
- value: 'fullscreen',
- checked: this.packageOptions.display === 'fullscreen',
- inputHandler: () => this.packageOptions.display = 'fullscreen'
+ label: 'Enable',
+ tooltip: 'If enabled, your download will include the source code for your Android app.',
+ inputId: 'include-src-input',
+ type: 'checkbox',
+ checked: this.packageOptions.includeSourceCode === true,
+ inputHandler: (_, checked) => this.packageOptions.includeSourceCode = checked
})}
+
+
@@ -669,40 +577,28 @@ export class AndroidForm extends AppPackageFormBase {
- ${this.renderFormInput({
- label: 'Fullscreen sticky',
- tooltip: `The Android status bar and navigation bar will be hidden while your app is running, and if the user swipes from the edge of the Android device, the system bars will be semi-transparent, and the touch gesture will be passed to your app. Recommended for drawing apps, and games that require lots of swiping.`,
- tooltipLink: 'https://developer.android.com/training/system-ui/immersive#sticky-immersive',
- inputId: 'display-fullscreen-sticky-input',
- type: 'radio',
+ ${this.renderFormRadioGroup({
name: 'displayMode',
- value: 'fullscreen-sticky',
- checked: this.packageOptions.display === 'fullscreen-sticky',
- inputHandler: () => this.packageOptions.display = 'fullscreen-sticky'
+ value: this.packageOptions.display ?? 'standalone',
+ valueChangedHandler: (value) => this.packageOptions.display = value as AndroidPackageOptions['display'],
+ radios: [
+ {
+ label: 'Standalone',
+ value: 'standalone',
+ tooltip: 'Recommended for most apps. The Android status bar and navigation bar will be shown while your app is running.',
+ tooltipLink: 'https://developer.android.com/training/system-ui/immersive'
+ },
+ {
+ label: 'Fullscreen',
+ value: 'fullscreen',
+ tooltip: `The Android status bar and navigation bar will be hidden while your app is running. Suitable for immersive experiences such as games or media apps.`,
+ tooltipLink: 'https://developer.android.com/training/system-ui/immersive#immersive'
+ },
+ {
+ label: 'Fullscreen sticky',
+ value: 'fullscreen-sticky',
+ tooltip: `The Android status bar and navigation bar will be hidden while your app is running, and if the user swipes from the edge of the Android device, the system bars will be semi-transparent, and the touch gesture will be passed to your app. Recommended for drawing apps, and games that require lots of swiping.`,
+ tooltipLink: 'https://developer.android.com/training/system-ui/immersive#sticky-immersive'
+ }
+ ]
})}
- ${this.renderFormInput({
+ ${this.renderFormRadioGroup({
+ name: 'signingMode',
+ value: this.packageOptions.signingMode ?? 'new',
+ valueChangedHandler: (value) => this.androidSigningModeChanged(value as 'mine' | 'new' | 'none'),
+ radios: [
+ {
label: 'New',
- tooltip: `Recommended for new apps in Google Play. PWABuilder will generate a new signing key for you and sign your package with it. Your download will contain the new signing details.`,
- inputId: 'signing-new-input',
- name: 'signingMode',
value: 'new',
- type: 'radio',
- checked: this.packageOptions.signingMode === 'new',
- inputHandler: () => this.androidSigningModeChanged('new')
- })}
-
-
- ${this.renderFormInput({
+ tooltip: `Recommended for new apps in Google Play. PWABuilder will generate a new signing key for you and sign your package with it. Your download will contain the new signing details.`
+ },
+ {
label: 'Use mine',
- tooltip: 'Recommended for existing apps in Google Play. Use this option if you already have a signing key and you want to publish a new version of an existing app in Google Play.',
- inputId: 'signing-mine-input',
- name: 'signingMode',
value: 'mine',
- type: 'radio',
- checked: this.packageOptions.signingMode === 'mine',
- inputHandler: () => this.androidSigningModeChanged('mine')
- })}
-
-
- ${this.renderFormInput({
+ tooltip: 'Recommended for existing apps in Google Play. Use this option if you already have a signing key and you want to publish a new version of an existing app in Google Play.'
+ },
+ {
label: 'None',
- tooltip: 'PWABuilder will generate a raw, unsigned APK. Raw, unsigned APKs cannot be uploaded to the Google Play Store.',
- inputId: 'signing-none-input',
- name: 'signingMode',
value: 'none',
- type: 'radio',
- checked: this.packageOptions.signingMode === 'none',
- inputHandler: () => this.androidSigningModeChanged('none')
- })}
+ tooltip: 'PWABuilder will generate a raw, unsigned APK. Raw, unsigned APKs cannot be uploaded to the Google Play Store.'
+ }
+ ]
+ })}
- ${this.renderFormInput({
+ ${this.renderFormRadioGroup({
+ name: 'fallbackType',
+ value: this.packageOptions.fallbackType ?? 'customtabs',
+ valueChangedHandler: (value) => this.packageOptions.fallbackType = value as AndroidPackageOptions['fallbackType'],
+ radios: [
+ {
label: 'Custom Tabs',
- tooltip: `When Trusted Web Activity (TWA) is unavailable, use Chrome Custom Tabs as a fallback to run your app.`,
- tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
- inputId: 'chrome-custom-tab-fallback-input',
- type: 'radio',
- name: 'fallbackType',
value: 'customtabs',
- checked: this.packageOptions.fallbackType === 'customtabs',
- inputHandler: () => this.packageOptions.fallbackType = 'customtabs'
- })}
-
-
- ${this.renderFormInput({
+ tooltip: `When Trusted Web Activity (TWA) is unavailable, use Chrome Custom Tabs as a fallback to run your app.`,
+ tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/'
+ },
+ {
label: 'Web View',
- tooltip: `When Trusted Web Activity (TWA) is unavailable, use a web view as a fallback to run your app.`,
- tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/',
- inputId: 'web-view-fallback-input',
- type: 'radio',
- name: 'fallbackType',
value: 'webview',
- checked: this.packageOptions.fallbackType === 'webview',
- inputHandler: () => this.packageOptions.fallbackType = 'webview'
- })}
+ tooltip: `When Trusted Web Activity (TWA) is unavailable, use a web view as a fallback to run your app.`,
+ tooltipLink: 'https://developer.chrome.com/docs/android/custom-tabs/'
+ }
+ ]
+ })}
-
${this.buttonText}
-
+
recordPWABuilderProcessStep(`footer.github_clicked`, AnalyticsBehavior.ProcessCheckpoint)}
>
-
diff --git a/apps/pwabuilder/Frontend/src/script/components/app-header.styles.ts b/apps/pwabuilder/Frontend/src/script/components/app-header.styles.ts
new file mode 100644
index 000000000..d95d4d42a
--- /dev/null
+++ b/apps/pwabuilder/Frontend/src/script/components/app-header.styles.ts
@@ -0,0 +1,211 @@
+import { css } from "lit";
+import {
+ xxxLargeBreakPoint,
+ xxLargeBreakPoint,
+ xLargeBreakPoint,
+ largeBreakPoint,
+ mediumBreakPoint,
+ smallBreakPoint,
+ xSmallBreakPoint,
+} from '../utils/css/breakpoints';
+
+export const appHeaderStyles = css`
+ :host {
+ --header-background: white;
+ --header-border: rgba(0, 0, 0, 0.25) solid 1px;
+ }
+
+ header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-left: 16px;
+ padding-right: 16px;
+ background: var(--header-background);
+ color: white;
+ height: 71px;
+ border-bottom: var(--header-border);
+ z-index: 1;
+ }
+
+ header img {
+ cursor: pointer;
+ width: 100px;
+ height: auto;
+ }
+
+ nav {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 8em;
+ gap: .75em;
+ }
+
+ .nav_button {
+ all: unset;
+ }
+
+ .nav_link {
+ color: var(--font-color);
+ text-decoration: none;
+ border-bottom: none;
+ font-weight: var(--font-bold);
+ font-size: var(--subheader-font-size);
+ margin: 0;
+ }
+
+ .nav_link:focus {
+ outline: solid;
+ outline-width: 2px;
+ }
+
+ .nav_link span {
+ display: inline-block;
+ height: 18px;
+ font-size: 20px;
+ }
+
+ .nav_link:hover span{
+ cursor: pointer;
+ }
+
+ nav wa-icon {
+ font-size: 1.15em;
+ }
+
+ .nav_link:visited {
+ color: black;
+ }
+
+ .link {
+ display: block;
+ width: 100%;
+ text-decoration: none;
+ }
+
+ .link:visited, .link:active, .link:link {
+ color: #777777;
+ }
+
+ .hover-color:hover {
+ color: var(--primary-color);
+ }
+
+ wa-dropdown::part(menu) {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ font-size: 16px;
+ }
+
+ wa-dropdown-item::part(checkmark), wa-dropdown-item::part(submenu-icon) {
+ display: none;
+ }
+
+ wa-dropdown-item::part(label) {
+ text-decoration: none;
+ border-bottom: none;
+ font-size: 14px;
+ margin: 0;
+ padding: 0;
+ }
+
+ wa-dropdown-item:focus-visible, wa-dropdown-item:hover {
+ background-color: transparent;
+ outline: none;
+ }
+
+ wa-dropdown-item:focus-visible::part(label), wa-dropdown-item:hover::part(label) {
+ color: var(--primary-color);
+ background-color: transparent;
+ }
+
+ wa-dropdown-item:focus-visible .link, wa-dropdown-item:hover .link {
+ color: var(--primary-color);
+ background-color: transparent;
+ }
+
+ wa-dropdown {
+ position: relative;
+ }
+
+ wa-dropdown::part(base){
+ box-shadow: 0px 16px 24px 0px #00000026;
+ }
+
+ .col-header {
+ text-decoration: none;
+ margin: 0;
+ white-space: nowrap;
+ font-weight: bold;
+ color: #777777;
+ padding: 0;
+ font-size: 14px;
+ }
+
+ @media (prefers-color-scheme: light) {
+ header {
+ color: black;
+ }
+ }
+
+ ${xSmallBreakPoint(css`
+ header {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+
+ header img {
+ width: 60px;
+ }
+
+ nav {
+ width: auto;
+ gap: 0.5em;
+ }
+
+ .nav_link span {
+ font-size: 16px;
+ }
+ `)}
+
+ ${smallBreakPoint(css`
+ `)}
+
+ ${mediumBreakPoint(css`
+ header nav {
+ display: initial;
+ }
+
+ #desktop-nav {
+ display: flex;
+ }
+ `)}
+
+ ${largeBreakPoint(css`
+ #desktop-nav {
+ display: flex;
+ }
+ `)}
+
+ ${xLargeBreakPoint(css`
+ header {
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+ `)}
+
+ ${xxLargeBreakPoint(css`
+ header {
+ padding-left: 3em;
+ padding-right: 3em;
+ }
+ `)}
+
+ ${xxxLargeBreakPoint(css`
+ header {
+ background-color: white;
+ }
+ `)}
+`;
diff --git a/apps/pwabuilder/Frontend/src/script/components/app-header.ts b/apps/pwabuilder/Frontend/src/script/components/app-header.ts
index 803f9d44b..8e0b1d246 100644
--- a/apps/pwabuilder/Frontend/src/script/components/app-header.ts
+++ b/apps/pwabuilder/Frontend/src/script/components/app-header.ts
@@ -1,290 +1,60 @@
import { Router } from '@vaadin/router';
-import { LitElement, css, html } from 'lit';
+import { LitElement, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { AnalyticsBehavior, recordPWABuilderProcessStep } from '../utils/analytics';
-import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
-import '@shoelace-style/shoelace/dist/components/menu/menu.js';
-import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
-import {
- xxxLargeBreakPoint,
- xxLargeBreakPoint,
- xLargeBreakPoint,
- largeBreakPoint,
- mediumBreakPoint,
- smallBreakPoint,
- xSmallBreakPoint,
-} from '../utils/css/breakpoints';
+import { appHeaderStyles } from './app-header.styles';
+import '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+import '@awesome.me/webawesome/dist/components/dropdown-item/dropdown-item.js';
+import "@awesome.me/webawesome/dist/components/icon/icon.js";
@customElement('app-header')
export class AppHeader extends LitElement {
- @property({ type: String }) page = 'home';
+ @property({ type: String }) page = 'home';
- static get styles() {
- return css`
- :host {
- --header-background: white;
- --header-border: rgba(0, 0, 0, 0.25) solid 1px;
- }
+ static styles = [appHeaderStyles];
- header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding-left: 16px;
- padding-right: 16px;
- background: var(--header-background);
- color: white;
- height: 71px;
-
- border-bottom: var(--header-border);
- z-index: 1;
- }
-
- header img {
- cursor: pointer;
- width: 100px;
- height: auto;
- }
-
- nav {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- width: 8em;
- gap: .75em;
- }
-
- .nav_button {
- all: unset;
- }
-
- .nav_link {
- color: var(--font-color);
- text-decoration: none;
- border-bottom: none;
- font-weight: var(--font-bold);
- font-size: var(--subheader-font-size);
- margin: 0;
- }
-
- .nav_link:focus {
- outline: solid;
- outline-width: 2px;
- }
-
- .nav_link span {
- display: inline-block;
- height: 18px;
- font-size: 20px;
- }
-
- .nav_link:hover span{
- cursor: pointer;
- }
-
- nav sl-icon {
- font-size: 2em;
- }
-
- .nav_link:visited {
- color: black;
- }
-
- .link {
- display: block;
- width: 100%;
- text-decoration: none;
- }
-
- .link:visited, .link:active, .link:link {
- color: #777777;
- }
-
- .hover-color:hover {
- color: var(--primary-color);
- }
-
- sl-menu {
- display: flex;
- flex-direction: column;
- background-color: white;
- gap: 5px;
- color: #777777;
- font-size: 16px;
- border-radius: 5px;
- height: fit-content;
- width: 136px;
- padding: 16px 22px;
- }
-
- sl-menu-item::part(checked-icon), sl-menu-item::part(submenu-icon) {
- display: none;
- }
-
- sl-menu-item::part(base){
- color: #777777;
- text-decoration: none;
- border-bottom: none;
- font-size: 14px;
- margin: 0;
- padding: 0;
- }
-
- sl-menu-item::part(base):hover sl-menu-item::part(label) {
- background-color: unset;
- color: var(--primary-color);
- }
-
- sl-menu-item:focus-visible::part(base) {
- color: var(--primary-color);
- background-color: transparent;
-
- }
-
- sl-menu-item:hover::part(base) {
- color: var(--primary-color);
- background-color: transparent;
- font-weight: 700;
- }
-
- sl-menu-item:focus-visible .link, sl-menu-item:hover .link {
- color: var(--primary-color);
- background-color: transparent;
- font-weight: 700;
- }
-
- sl-dropdown {
- position: relative;
-
- }
- sl-dropdown::part(base){
- box-shadow: 0px 16px 24px 0px #00000026;
- }
-
- .col-header {
- text-decoration: none;
- margin: 0;
- white-space: nowrap;
- font-weight: bold;
- color: #777777;
- padding: 0;
- font-size: 14px;
- }
-
- @media (prefers-color-scheme: light) {
- header {
- color: black;
- }
- }
-
- ${xSmallBreakPoint(css`
- header {
- padding-left: 8px;
- padding-right: 8px;
- }
-
- header img {
- width: 60px;
- }
-
- nav {
- width: auto;
- gap: 0.5em;
- }
-
- .nav_link span {
- font-size: 16px;
- }
- `)}
-
- ${smallBreakPoint(css`
-
- `)}
-
- ${mediumBreakPoint(css`
- header nav {
- display: initial;
- }
-
- #desktop-nav {
- display: flex;
- }
-
- `)}
-
-
- ${largeBreakPoint(css`
- #desktop-nav {
- display: flex;
- }
-
- `)}
+ constructor() {
+ super();
+ }
- ${xLargeBreakPoint(css`
- header {
- padding-left: 1em;
- padding-right: 1em;
- }
- `)}
+ firstUpdated() {
+ // Cant seem to type `event` as a KeyboardEvent without TypeScript complaining
+ // with an error I dont fully understand.
+ // revisit: Justin
+ this.shadowRoot?.querySelector('#header-icon')?.addEventListener("keydown", (event) => {
+ // casting here because of type problem described above
+ if ((event as KeyboardEvent).key === "Enter") {
+ Router.go("/");
+ }
+ })
+ }
- ${xxLargeBreakPoint(css`
- header {
- padding-left: 3em;
- padding-right: 3em;
- }
- `)}
+ recordGoingHome() {
+ window.location.href = "/";
+ recordPWABuilderProcessStep(`header.logo_clicked`, AnalyticsBehavior.ProcessCheckpoint);
+ }
- ${xxxLargeBreakPoint(css`
- header {
- background-color: white;
+ showMenu() {
+ let menu = this.shadowRoot!.querySelector("wa-dropdown");
+ if (menu!.open) {
+ recordPWABuilderProcessStep(`header.community_dropdown_closed`, AnalyticsBehavior.ProcessCheckpoint)
+ menu!.open = false;
+ } else {
+ recordPWABuilderProcessStep(`header.community_dropdown_expanded`, AnalyticsBehavior.ProcessCheckpoint)
+ menu!.open = true;
}
- `)}
- `;
- }
-
- constructor() {
- super();
- }
-
- firstUpdated() {
- // Cant seem to type `event` as a KeyboardEvent without TypeScript complaining
- // with an error I dont fully understand.
- // revisit: Justin
- this.shadowRoot?.querySelector('#header-icon')?.addEventListener("keydown", (event) => {
- // casting here because of type problem described above
- if ((event as KeyboardEvent).key === "Enter") {
- Router.go("/");
- }
- })
- }
-
- recordGoingHome() {
- window.location.href = "/";
- recordPWABuilderProcessStep(`header.logo_clicked`, AnalyticsBehavior.ProcessCheckpoint);
- }
-
- showMenu(){
- let menu = this.shadowRoot!.querySelector("sl-dropdown");
- if(menu!.open){
- recordPWABuilderProcessStep(`header.community_dropdown_closed`, AnalyticsBehavior.ProcessCheckpoint)
- menu!.hide()
- } else {
- recordPWABuilderProcessStep(`header.community_dropdown_expanded`, AnalyticsBehavior.ProcessCheckpoint)
- menu!.show();
-
}
- }
- // hacky work around for clicking links with keyboard that are nested in menu items
- // in the future, shoelace may make 
- ${this.page === "home" ?
- html`
+ ${this.page === "home" ?
+ html`
Docs
` : null
- }
+ }
- Follow us on
-