Added CC Navbar

flightscore/src/app-root.ts

@@ -1,18 +1,22 @@
 import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import './pages/not-found-page';
 import './components/nav-bar';
+import './components/cc/cc-nav-bar';
 import './components/footer-bar';
 import { Router } from './router/router';
 import './pages/home-page';
 import './pages/competition-page';
 import './pages/auth/login-page';
 import './pages/auth/register-page';
+import './pages/cc/cc-home-page';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
   private router!: Router;
 
+    @state() private isCompetitionCenter = false;
+
   static styles = css`
     :host {
   display: flex;
@@ -41,14 +45,22 @@ export class AppRoot extends LitElement {
       { path: '/competitions', view: () => document.createElement('competition-page') },
       { path: '/login', view: () => document.createElement('login-page') },
       { path: '/register', view: () => document.createElement('register-page') },
+      { path: '/cc/', view: () => 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`
-      <nav-bar></nav-bar>
+      ${this.isCompetitionCenter
+        ? html`<cc-nav-bar></cc-nav-bar>`
+        : html`<nav-bar></nav-bar>`}
       <main id="outlet"></main>
       <footer-bar></footer-bar>
     `;