Pr fixes

swisstopo · Dec 9, 2024 · fa22d34 · fa22d34
1 parent 302daf2
commit fa22d34
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/ui/src/elements/ngm-auth.ts b/ui/src/elements/ngm-auth.ts
@@ -22,7 +22,6 @@ export class NgmAuth extends LitElementI18n {
   @state()
   accessor user: AuthUser | null = null;
   private popup: Window | null = null;
-  private readonly icon = 'user';
 
   @consume({context: authServiceContext})
   accessor authService!: AuthService;
@@ -80,13 +79,8 @@ export class NgmAuth extends LitElementI18n {
   render() {
     return html`
       <div
-           @click=${!this.user ? this.login : this.logout}>
-          <ngm-icon icon=${this.icon}></ngm-icon>
+           @click=${this.user ? this.logout : this.login}>
+          <ngm-icon icon='user'></ngm-icon>
       </div>`;
   }
-
-  // createRenderRoot() {
-  //   // no shadow dom
-  //   return this;
-  // }
 }
diff --git a/ui/src/elements/ngm-side-bar.ts b/ui/src/elements/ngm-side-bar.ts
@@ -167,6 +167,9 @@ export class SideBar extends LitElementI18n {
     if (sliceOptions?.type && sliceOptions.slicePoints)
       this.activePanel = 'tools';
   }
+  private createMenuItem(icon: string, title: string, panel: string) {
+    return html`<ngm-menu-item icon=${icon} title=${title} ?isActive=${this.activePanel === panel} ?isMobile=${this.mobileView} @click=${() => this.togglePanel('data')}></ngm-menu-item>`;
+  }
 
   render() {
     if (!this.queryManager) {
@@ -176,11 +179,17 @@ export class SideBar extends LitElementI18n {
     this.queryManager.activeLayers = this.activeLayers
       .filter(config => config.visible && !config.noQuery);
 
-    const layerBtn = html`<ngm-menu-item icon="layer" title="menu_layers" ?isActive="${this.activePanel === 'data'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('data')}></ngm-menu-item>`;
-    const toolsBtn = html`<ngm-menu-item icon="tools" title="menu_tools" ?isActive="${this.activePanel === 'tools'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('tools')}></ngm-menu-item>`;
-    const projectsBtn = html`<ngm-menu-item icon="projects" title="menu_projects" ?isActive="${this.activePanel === 'dashboard'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('dashboard')}></ngm-menu-item>`;
-    const shareBtn = html`<ngm-menu-item icon="share" title="menu_share" ?isActive="${this.activePanel === 'share'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('share')}></ngm-menu-item>`;
-    const settingsBtn = html`<ngm-menu-item icon="config" title="menu_settings" ?isActive="${this.activePanel === 'settings'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('settings')}></ngm-menu-item>`;
+
+    const layerBtn = this.createMenuItem('layer', 'menu_layers', 'data');
+    const toolsBtn = this.createMenuItem('tools', 'menu_tools', 'tools');
+    const projectsBtn = this.createMenuItem('projects', 'menu_projects', 'dashboard');
+    const shareBtn = this.createMenuItem('share', 'menu_share', 'share');
+    const settingsBtn = this.createMenuItem('config', 'menu_settings', 'settings');
+    // const layerBtn = html`<ngm-menu-item icon="layer" title="menu_layers" ?isActive="${this.activePanel === 'data'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('data')}></ngm-menu-item>`;
+    // const toolsBtn = html`<ngm-menu-item icon="tools" title="menu_tools" ?isActive="${this.activePanel === 'tools'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('tools')}></ngm-menu-item>`;
+    // const projectsBtn = html`<ngm-menu-item icon="projects" title="menu_projects" ?isActive="${this.activePanel === 'dashboard'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('dashboard')}></ngm-menu-item>`;
+    // const shareBtn = html`<ngm-menu-item icon="share" title="menu_share" ?isActive="${this.activePanel === 'share'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('share')}></ngm-menu-item>`;
+    // const settingsBtn = html`<ngm-menu-item icon="config" title="menu_settings" ?isActive="${this.activePanel === 'settings'}" ?isMobile="${this.mobileView}" @click=${() => this.togglePanel('settings')}></ngm-menu-item>`;
     const mobileExpandBtn = html`<ngm-menu-item icon="${this.mobileShowAll ? 'view_less' : 'view_all'}" @click=${() => this.mobileShowAll = !this.mobileShowAll}></ngm-menu-item>`;
     const dataMobileHeader = html`
       <div @click=${() => this.hideDataDisplayed = true}