Isolate common stylesheets

index.html

@@ -26,4 +26,4 @@
   <script src="/src/js/index.js" type="module"></script>
 </body>
 
-</html>
+</html>

src/components/app-bar.js

@@ -0,0 +1,100 @@
+import app from '../js/app';
+
+const appBarLogoURL = new URL('../../static/images/app-bar-logo.png', import.meta.url).href;
+const backArrowIconURL = new URL('../../static/images/back-arrow-icon.png', import.meta.url).href;
+
+const template = `
+  <div>
+    <img id="back-button" src="${backArrowIconURL}">
+  </div>
+  <div id="title">
+    Percorsi <span class="bold">naturalistici</span>
+  </div>
+  <div>
+    <img src="${appBarLogoURL}">
+  </div>
+`;
+const style = `
+  :host {
+    display: flex;
+    height: 100%;
+    min-height: 68px;
+    width: 100%;
+    background-color: var(--primary-color);
+    color: white;
+  }
+
+  :host > div {
+    display: grid;
+    place-items: center;
+    flex: 1;
+  }
+
+  #title {
+    display: flex;
+    place-items: center;
+    justify-content: center;
+  }
+
+  #title span {
+    font-weight: bold;
+    margin-left: 5px;
+    font-size: 18px;
+  }
+
+  img {
+    display: block;
+    // flex: 0 1 32px;
+    height: 32px;
+    width: auto;
+  }
+`;
+
+/**
+ * Bottom app bar custom element.
+ */
+class AppBar extends HTMLElement {
+  #elements = {};
+
+  /**
+   * @constructor
+   */
+  constructor() {
+    super();
+
+    this.#createShadowDOM();
+    this.#setElements();
+    this.#addEventListeners();
+  }
+
+  /**
+   * Create shadow DOM.
+   */
+  #createShadowDOM() {
+    this.attachShadow({mode: 'open'});
+    this.shadowRoot.innerHTML = `
+      <style>${style}</style>
+      ${template}
+    `;
+  }
+
+  /**
+   * Set all shadow dom selectors.
+   */
+  #setElements() {
+    this.#elements = {
+      backButton: this.shadowRoot.querySelector('#back-button'),
+    };
+  }
+
+  #addEventListeners() {
+    this.#elements.backButton.addEventListener('click', () => {
+      app.router.back();
+    });
+  }
+}
+
+customElements.define('app-bar', AppBar);
+
+export default AppBar;
+

src/components/bottom-app-bar.js

@@ -1,16 +1,16 @@
-import homeIconUrl from '../../static/images/home-icon.png';
-import routesIconUrl from '../../static/images/routes-icon.png';
-import settingsIconUrl from '../../static/images/settings-icon.png';
+const homeIconURL = new URL('../../static/images/home-icon.png', import.meta.url).href;
+const routesIconURL = new URL('../../static/images/routes-icon.png', import.meta.url).href;
+const settingsIconURL = new URL('../../static/images/settings-icon.png', import.meta.url).href;
 
 const template = `
   <div>
-    <img src="${homeIconUrl}">
+    <img src="${homeIconURL}">
   </div>
   <div>
-    <img src="${routesIconUrl}">
+    <img src="${routesIconURL}">
   </div>
   <div>
-    <img src="${settingsIconUrl}">
+    <img src="${settingsIconURL}">
   </div>
 `;
 const style = `

src/css/app.css

@@ -2,6 +2,7 @@
 :root {
   --footer-height: calc(68px + 20px + 20px);
   --accent-color: #213c8b;
+  --primary-color: #de0e1b;
   --pianello-red: #de0e1b;
   --pianello-yellow: #f6ae04;
   --pianello-blue: #213c8b;

src/css/routes-page.css

@@ -0,0 +1,2 @@
+
+

src/js/app.js

@@ -13,6 +13,12 @@ const app = {
   link: {
     icon: appIconURL,
   },
+  styleSheets: [robotoFontStyle, appStyle]
+    .map((rawSheet) => {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(rawSheet);
+      return sheet;
+    }),
   page: null,
   router: new Router(),
   loader: WDLoader.instance,
@@ -23,12 +29,7 @@ const app = {
       <meta name="viewport" content="${app.meta.viewport}">
     `;
     document.title = app.title;
-    document.adoptedStyleSheets = [robotoFontStyle, appStyle]
-        .map((rawSheet) => {
-          const sheet = new CSSStyleSheet();
-          sheet.replaceSync(rawSheet);
-          return sheet;
-        });
+    document.adoptedStyleSheets = app.styleSheets;
   },
 };
 

src/js/home-page.js

@@ -1,6 +1,7 @@
 import app from './app.js';
 import pageStyle from '../css/home-page.css?raw';
 import BottomAppBar from '../components/bottom-app-bar.js';
+import routesPageURL from '../pages/routes-page.html?url';
 
 class HomePage {
   /**
@@ -25,19 +26,25 @@ class HomePage {
   #addPageStyle() {
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(pageStyle);
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    document.adoptedStyleSheets = [...app.styleSheets, sheet];
   }
 
   /**
    * Init `#elements` field that holds element references.
    */
   #setElements() {
-    this.#elements = {};
+    this.#elements = {
+      routeCards: document.querySelector('#route-cards'),
+    };
   }
 
   /**
    */
-  #addEventListeners() {}
+  #addEventListeners() {
+    this.#elements.routeCards.addEventListener('click', () => {
+      app.router.navigate(routesPageURL);
+    });
+  }
 }
 
 export default HomePage;

src/js/router.js

@@ -153,6 +153,10 @@ class Router {
       script: template.content.querySelector('#page-script')?.cloneNode(true),
     };
   }
+
+  back() {
+    history.back();
+  }
 }
 
 export default Router;

src/js/routes-page.js

@@ -0,0 +1,47 @@
+import app from './app.js';
+import pageStyle from '../css/routes-page.css?raw';
+import AppBar from '../components/app-bar.js';
+import BottomAppBar from '../components/bottom-app-bar.js';
+
+class RoutesPage {
+  /**
+   * An object containing useful HTMLElement references.
+   * @type {Object}
+   */
+  #elements = {};
+
+  constructor() {
+    this.#addPageStyle();
+    this.#setElements();
+    this.#addEventListeners();
+  }
+
+  /**
+   * @return {Object}
+   */
+  get elements() {
+    return this.#elements;
+  }
+
+  #addPageStyle() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(pageStyle);
+    document.adoptedStyleSheets = [...app.styleSheets, sheet];
+  }
+
+  /**
+   * Init `#elements` field that holds element references.
+   */
+  #setElements() {
+    this.#elements = {};
+  }
+
+  /**
+   */
+  #addEventListeners() {}
+}
+
+export default RoutesPage;
+
+app.init();
+app.page = new RoutesPage();

src/pages/routes-page.html

@@ -0,0 +1,28 @@
+<body>
+  <header>
+    <app-bar></app-bar>
+  </header>
+
+  <main>
+    <div id="route-cards">
+      <div class="route-card">
+        <div class="image"></div>
+        <div class="info">
+          <div class="name">
+            <p>Percorso</p>
+            <p class="bold">Pianello n1</p>
+          </div>
+          <div class="duration">
+            Durata <span class="bold">90'</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    <bottom-app-bar></bottom-app-bar>
+  </footer>
+
+  <script id="page-script" src="../js/routes-page.js" type="module"></script>
+</body>