- set public path to /

- on route change event close bulma navbar (in app.ts)

src/App.vue

@@ -13,36 +13,36 @@
                 <!-- <img src="./assets/images/TETHYS-Logo.svg" width="240px" height="86" alt="TETHYS Logo" /> -->
                 <img src="./assets/images/TETHYS-Logo.svg" width="240" height="86" />
             </a>
-            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
+            <a id="menu-icon" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" :class="active ? 'is-active' : ''" @click="showMobilemenu">
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
                 <span aria-hidden="true"></span>
             </a>
         </div>
-        <div id="navMenu" class="navbar-menu">
+        <div id="navMenu" class="navbar-menu" :class="active ? 'is-active' : ''">
             <ul class="navbar-start" style="flex-grow: 1; justify-content: center">
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless active" href="#">STARTSEITE</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/">STARTSEITE</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/">STARTSEITE</router-link>
                 </li>
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">SEARCH</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/search">SEARCH</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/search">SEARCH</router-link>
                 </li>
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">SERVICES</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/services">SERVICES</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/services">SERVICES</router-link>
                 </li>
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/help">HELP</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
                 </li>
                 <!-- <li class="navbar-item">
                     <a class="navbar-link is-arrowless" href="#">HELP</a>
                 </li> -->
                 <li class="navbar-item">
                     <!-- <a class="navbar-link is-arrowless" href="#">OAI</a> -->
-                    <router-link class="navbar-link is-arrowless" to="/test/oai">OAI</router-link>
+                    <router-link class="navbar-link is-arrowless" to="/oai">OAI</router-link>
                 </li>
                 <!-- 
                 <a href="#" class="custom-btn"><i class="fas fa-sign-in-alt"></i>SIGN IN</a> -->

src/app.ts

@@ -1,4 +1,6 @@
 import { Options, Vue } from "vue-class-component";
+import { Watch } from "vue-property-decorator";
+import { RouteLocation } from "vue-router";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
 import HelpViewComponent from "./views/map-view/help-view-component.vue";
@@ -16,6 +18,7 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
 // import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "./models/headers";
 // import { ActiveFilterCategories } from "@/models/solr";
 
+// https://devsoniq.com/how-to-toggle-bulma-css-navbar-in-your-vue-js-project/
 @Options({
     components: {
         HelloWorld,
@@ -31,22 +34,35 @@ import OaiViewComponent from "./views/oai-view/oai-view-component.vue";
     },
 })
 export default class App extends Vue {
-    mounted(): void {
+    public active = false;
-        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
-        // Check if there are any navbar burgers
-        if ($navbarBurgers.length > 0) {
-            // Add a click event on each of them
-            $navbarBurgers.forEach((el) => {
-                el.addEventListener("click", () => {
-                    // Get the target from the "data-target" attribute
-                    const target = el.dataset.target;
-                    const $target = document.getElementById(target);
 
-                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+    mounted(): void {
-                    el.classList.toggle("is-active");
+        // const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
-                    $target?.classList.toggle("is-active");
+        // // Check if there are any navbar burgers
-                });
+        // if ($navbarBurgers.length > 0) {
-            });
+        //     // Add a click event on each of them
-        }
+        //     $navbarBurgers.forEach((elNavBurger) => {
+        //         elNavBurger.addEventListener("click", () => {
+        //             // Get the target from the "data-target" attribute
+        //             const targetNavbar = elNavBurger.dataset.target;
+        //             const $target = document.getElementById(targetNavbar);
+        //             // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        //             elNavBurger.classList.toggle("is-active");
+        //             $target?.classList.toggle("is-active");
+        //         });
+        //     });
+        // }
+    }
+
+    public showMobilemenu(event: PointerEvent): void {
+        // Don't follow the link
+        event.preventDefault();
+        this.active = !this.active;
+    }
+
+    @Watch("$route")
+    protected oRouteChangedChanged(to: RouteLocation, from: RouteLocation): any {
+        // console.log("setting " + from.path + " to " + to.path);
+        this.active = false;
     }
 }

src/router/index.ts

@@ -7,27 +7,27 @@ import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
 
 const routes = [
     {
-        path: "/test/",
+        path: "/",
         name: "Home",
         component: HomeViewComponent,
     },
     {
-        path: "/test/help",
+        path: "/help",
         name: "Help",
         component: HelpViewComponent,
     },
     {
-        path: "/test/search",
+        path: "/search",
         name: "Search",
         component: SearchViewComponent,
     },
     {
-        path: "/test/services",
+        path: "/services",
         name: "Services",
         component: ServiceViewComponent,
     },
     {
-        path: "/test/oai",
+        path: "/oai",
         name: "Oai",
         component: OaiViewComponent,
     },

src/views/home-view/home-view-component.vue

@@ -87,7 +87,7 @@
                     <p class="lead">Eine Übersicht unserer Dienstleistungen</p>
                     <hr class="center-line" />
                 </div>
-                <div class="columns is-tablet work-items">
+                <div class="columns is-desktop work-items">
                     <div class="column col-sm overlay-boxes">
                         <div class="card overlay work-back">
                             <img src="@/assets/site/img/box-1-hover.jpg" alt="Datenarchivierung" />
@@ -200,11 +200,21 @@
                         <div class="card-body">
                             <h5 class="card-title">Tools and Support</h5>
                             <ul class="list-group list-group-flush">
-                                <li class="list-group-item"><a href="#">Contact</a></li>
+                                <li class="list-group-item">
-                                <li class="list-group-item"><a href="#">Impressum</a></li>
+                                    <a href="#"><i class="far fa-id-card"></i> Contact</a>
-                                <li class="list-group-item"><a href="#">Sitelinks</a></li>
+                                </li>
-                                <li class="list-group-item"><a href="#">Terms &amp; Conditions</a></li>
+                                <li class="list-group-item">
-                                <li class="list-group-item"><a href="#">rdr bei GitHub</a></li>
+                                    <a href="#"><i class="fas fa-stamp"></i> Impressum</a>
+                                </li>
+                                <li class="list-group-item">
+                                    <a href="#"><i class="fas fa-link"></i> Sitelinks</a>
+                                </li>
+                                <li class="list-group-item">
+                                    <a href="#"><i class="far fa-file-alt"></i> Terms &amp; Conditions</a>
+                                </li>
+                                <li class="list-group-item">
+                                    <a target="_blank" href="https://github.com/geolba/tethys"><i class="fab fa-github"></i> rdr bei GitHub</a>
+                                </li>
                             </ul>
                         </div>
                     </div>
@@ -215,7 +225,7 @@
                             <h5 class="card-title">Connect with us</h5>
                             <ul class="list-group list-group-flush">
                                 <li class="list-group-item">
-                                    <a href="#"><i class="fas fa-home pr-2"></i>GBA</a>
+                                    <a target="_blank" href="https://www.geologie.ac.at/"><i class="fas fa-home pr-2"></i>GBA</a>
                                 </li>
                                 <li class="list-group-item">
                                     <a href="#"><i class="fas fa-phone-alt pr-2"></i> +43-1-7125674</a>

vue.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    publicPath: "/test" 
+    publicPath: "/" 
  }