FlightScore-Frontend/flightscore/src/app-root.ts

import { LitElement, html, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { Router } from './router/router';
import './pages/not-found-page';
import './components/nav-bar';
import './components/cc/cc-nav-bar';
import './components/footer-bar';

@customElement('app-root')
export class AppRoot extends LitElement {
  private router!: Router;

  @state() private isCompetitionCenter = false;

  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
  }
  nav-bar {
      flex: 0 0 auto;
    }

    main {
      flex: 1 0 auto; 
      display: flex;
      flex-direction: column;
    }

    footer-bar {
      flex: 0 0 auto;
    }
`

  firstUpdated() {
    const outlet = this.shadowRoot?.getElementById('outlet') as HTMLElement;
    this.router = new Router(outlet, [
      {
        path: '/', view: async () => {
          await import('./pages/home-page.js');
          return document.createElement('home-page');
        }
      },
      {
        path: '/competitions', view: async () => {
          await import('./pages/competition-page.js');
          return document.createElement('competition-page');
        }
      },
      {
        path: '/login', view: async () => {
          await import('./pages/auth/login-page.js');
          return document.createElement('login-page')
        }
      },
      {
        path: '/register', view: async () => {
          await import('./pages/auth/register-page.js');
          return document.createElement('register-page');
        }
      },
      {
        path: '/cc/', view: async () => {
          await import('./pages/cc/cc-home-page.js');
          return document.createElement('cc-home-page');
        }
      },
    ]);

    this.router.onRouteChange = (path: string) => {
      this.isCompetitionCenter = path.startsWith('/cc');
    };

    this.router.resolve();
    this.addEventListener('nav', (e: any) => this.router.navigate(e.detail.path));
  }

  render() {
    return html`
      ${this.isCompetitionCenter
        ? html`<cc-nav-bar></cc-nav-bar>`
        : html`<nav-bar></nav-bar>`}
      <main id="outlet"></main>
      <footer-bar></footer-bar>
    `;
  }
}