@progressive-development/pd-spa-helper 0.1.101 → 0.1.103

package/src/PdSpaHelper.ts

@@ -210,6 +210,13 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
       transition: background-color 1s;
     }
 
+    .default-top-menu, .default-top-menu-withteaser {      
+      --pd-menu-height: 20px;
+      --pd-menu-font-size: 1em;
+      --pd-menu-font-weight: normal;
+      --pd-menu-shadow: 0;
+    }    
+
     /* needed for pd-spa-padding-top, only for pages with teaser, check if refactor possible... */
     .default-main-padding {
       padding-top: calc(var(--pd-menu-height) + var(--pd-spa-padding-top, 120px));
@@ -308,6 +315,7 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
     const hideTeaser = this._teaserClosed || !pageConf?.withTeaser;
     return html`
       <header id="headerElementId" class="default-header">
+        ${pageConf?.hideTopMenu ? '' : this._renderTopMenu(pageConf, hideTeaser)}
         ${hideTeaser ? '' : this._renderTeaser()}
         ${pageConf?.hideMenu ? '' : this._renderMenu(pageConf, hideTeaser)}
       </header>      
@@ -350,23 +358,35 @@ export abstract class PdSpaHelper extends router(navigator(LitElement)) {
 
   _renderMenu(pageConfig:NavigationPage, hideTeaser:boolean) {
     const menuForPage = pageConfig ? (pageConfig.menu || []) : [];
-    const topMenuForPage = pageConfig ? (pageConfig.topMenu || []) : [];
     return menuForPage ? html`
-      <pd-menu      
+      <pd-menu
         id="pdHelperMenuId"
+        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"
+        .menuItems=${menuForPage}
+        activeRoute="${this.route}"
+        headerSize="${this._getHeaderSize(hideTeaser)}"
+      >
+        ${hideTeaser ? this._getAppLogo() : ''}
+      </pd-menu>
+    ` : '';
+  } 
+
+  _renderTopMenu(pageConfig:NavigationPage, hideTeaser:boolean) {
+    const topMenuForPage = pageConfig ? pageConfig.topMenuItems : undefined;
+    return topMenuForPage ? html`
+      <pd-menu      
+        id="pdHelperTopMenuId"
         @locale-change="${this._localeChange}"
-        class="${hideTeaser ? "default-menu" : "default-menu-withteaser"}"        
+        class="${hideTeaser ? "default-top-menu" : "default-top-menu-withteaser"}"        
         .locales=${this._availableLocales}
         selectedLocale="${this._selectedLocale}"
-        .menuItems=${menuForPage}
         .topMenuItems=${topMenuForPage}
         activeRoute="${this.route}"
-        headerSize="${this._getHeaderSize(hideTeaser)}"
+        headerSize="${20}"
       >
-        ${hideTeaser ? this._getAppLogo() : ''}
       </pd-menu>
     ` : '';
-  }  
+  }
 
   // eslint-disable-next-line class-methods-use-this
   _renderTeaser(): TemplateResult | string {

package/src/service-provider/service-provider-model.ts

@@ -68,6 +68,8 @@ export interface NavigationPage {
   withTeaser?: boolean,
   withFooter?: boolean
   hideMenu?: boolean
+  hideTopMenu?: boolean
+  topMenuItems?: Array<MenuElement>,
 }
 
 export interface NavigationConfig {

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/stories/index.stories.ts

@@ -1,60 +0,0 @@
-import { html, TemplateResult } from 'lit';
-import '../src/pd-spa-helper.js';
-
-export default {
-  title: 'PdSpaHelper',
-  component: 'pd-spa-helper',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
-  },
-};
-
-interface Story<T> {
-  (args: T): TemplateResult;
-  args?: Partial<T>;
-  argTypes?: Record<string, unknown>;
-}
-
-interface ArgTypes {
-  title?: string;
-  counter?: number;
-  textColor?: string;
-  slot?: TemplateResult;
-}
-
-const Template: Story<ArgTypes> = ({
-  title = 'Hello world',
-  counter = 5,
-  textColor,
-  slot,
-}: ArgTypes) => html`
-  <pd-spa-helper
-    style="--pd-spa-helper-text-color: ${textColor || 'black'}"
-    .title=${title}
-    .counter=${counter}
-  >
-    ${slot}
-  </pd-spa-helper>
-`;
-
-export const Regular = Template.bind({});
-
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
-};