CodingPhoenixx
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { LitElement, html, css } from 'lit';
|
|
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;
|
|
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: () => document.createElement('home-page') },
|
|
{ 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`
|
|
${this.isCompetitionCenter
|
|
? html`<cc-nav-bar></cc-nav-bar>`
|
|
: html`<nav-bar></nav-bar>`}
|
|
<main id="outlet"></main>
|
|
<footer-bar></footer-bar>
|
|
`;
|
|
}
|
|
} |