Links between pages

source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache

@@ -3,10 +3,10 @@
     <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
       <div class="candidate-card__avatar">
         <div class="candidate-card__position">{{ person.position }}</div>
-        {{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}
+        <a href="{{ link.templates-candidate-detail }}">{{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg") }}</a>
       </div>
       <div class="candidate-card__bio">
-        <h1 class="head-heavy-xs">{{ person.first }} {{ person.last }}</h1>
+        <h1 class="head-heavy-xs"><a href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1>
         <div class="font-light mb-4">{{ person.email }}</div>
         <h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
       </div>

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

-<div class="candidate-table-row">
+<a href="{{ link.templates-candidate-detail }}" class="candidate-table-row">
   <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
   {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
   <div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
@@ -7,4 +7,4 @@
     {{> atoms-basic-avatar(classes: "w-6 mr-2") }}
     <span class="font-bold font-condensed">{{ person.party }}</span>
   </div>
-</div>
+</a>

source/_patterns/02-organisms/00-global/navbar.mustache

@@ -23,34 +23,34 @@
         <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
           <ul class="navbar-menu text-white">
             <li class="navbar-menu__item">
-              <a href="#" class="navbar-menu__link">Hlavní strana</a>
+              <a href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="#" class="navbar-menu__link">Lidé</a>
+              <a href="{{ link.templates-people }}" class="navbar-menu__link">Lidé</a>
             </li>
             <li class="navbar-menu__item">
-              <navbar-subitem label="Aktuality" href="#">
+              <navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
                 <ul class="navbar-menu__submenu">
-                  <li><a href="#" class="navbar-menu__link">Detail aktuality</a></li>
+                  <li><a href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
                 </ul>
               </navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
               <navbar-subitem label="Volby">
                 <ul class="navbar-menu__submenu">
-                  <li><a href="#" class="navbar-menu__link">Kandidáti</a></li>
-                  <li><a href="#" class="navbar-menu__link">Program</a></li>
+                  <li><a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a></li>
+                  <li><a href="{{ link.templates-elections-program }}" class="navbar-menu__link">Program</a></li>
                 </ul>
               </navbar-subtitem>
             </li>
             <li class="navbar-menu__item">
-              <a href="#" class="navbar-menu__link">Kandidáti</a>
+              <a href="{{ link.templates-elections-candidates }}" class="navbar-menu__link">Kandidáti</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="#" class="navbar-menu__link">Pirátské centrum</a>
+              <a href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
             </li>
             <li class="navbar-menu__item">
-              <a href="#" class="navbar-menu__link">Kontakt</a>
+              <a href="{{ link.templates-contact }}" class="navbar-menu__link">Kontakt</a>
             </li>
           </ul>
         </div>

source/css/molecules/candidate-table-row.pcss

@@ -14,6 +14,10 @@
   &:hover:after {
     @apply elevation-10;
   }
+
+  &:hover {
+    @apply no-underline;
+  }
 }
 
 .candidate-table-row__position {

source/js/apps/navbar/NavbarSubitem.vue

 <template>
   <div @mouseenter="show = true" @mouseleave="show = false">
-    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="show = !show">{{ label }}</span>
-    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="show = !show">{{ label }}</a>
+    <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
 
     <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
       <slot>
@@ -24,6 +23,15 @@ export default {
     label: {
       type: String,
     }
+  },
+  methods: {
+    handleClick() {
+      if (this.$props.href) {
+        window.location = this.$props.href;
+      }
+
+      this.$data.show = !this.$data.show;
+    }
   }
 }
 </script>