fixed post card links

assets/styles/main.scss

@@ -126,3 +126,15 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+[class$=menu-trigger] {
+  user-select: none;
+}
+[class$=menu-popover] {
+  display: inline-block;
+
+  nav {
+    margin-left: -17px;
+    margin-right: -15px;
+  }
+}

components/PostCard.vue

@@ -1,13 +1,16 @@
 <template>
-  <a
-    v-router-link
-    :href="href(post)"
-  >
   <ds-card
     :header="post.title"
     :image="post.image"
-      style="cursor: pointer; position: relative;"
+    class="post-card"
   >
+    <a
+      v-router-link
+      class="post-link"
+      :href="href(post)"
+    >
+      {{ post.title }}
+    </a>
     <no-ssr>
       <dropdown class="post-menu">
         <template
@@ -19,7 +22,7 @@
             href="#"
             @click.prevent="toggleMenu()"
           >
-              Options
+            <ds-icon name="angle-down" />
           </a>
         </template>
         <template
@@ -27,10 +30,7 @@
           slot-scope="{toggleMenu}"
         >
           <div class="post-menu-popover">
-              <ds-menu
-                :routes="routes"
-                :is-exact="isExact"
-              >
+            <ds-menu :routes="routes">
               <ds-menu-item
                 slot="Navigation"
                 slot-scope="item"
@@ -41,10 +41,6 @@
                 <ds-icon :name="item.route.icon" /> {{ item.route.name }}
               </ds-menu-item>
             </ds-menu>
-              <ds-space margin="xx-small" />
-              <nuxt-link :to="{ name: 'logout'}">
-                <ds-icon name="sign-out" /> {{ $t('login.logout') }}
-              </nuxt-link>
           </div>
         </template>
       </dropdown>
@@ -60,7 +56,7 @@
     <!-- eslint-enable vue/no-v-html -->
     <ds-space
       margin="small"
-        style="position: absolute; bottom: 44px;"
+      style="position: absolute; bottom: 44px; z-index: 1;"
     >
       <!-- TODO: find better solution for rendering errors -->
       <no-ssr>
@@ -91,7 +87,6 @@
       </div>
     </template>
   </ds-card>
-  </a>
 </template>
 
 <script>
@@ -155,10 +150,34 @@ export default {
         name: 'post-slug',
         params: { slug: post.slug }
       }).href
-    },
-    isExact(url) {
-      return this.$route.path.indexOf(url) === 0
     }
   }
 }
 </script>
+
+<style lang="scss">
+.post-card {
+  cursor: pointer;
+  position: relative;
+
+  .ds-card-footer {
+    z-index: 1;
+  }
+}
+.post-menu {
+  position: absolute;
+  top: $space-small;
+  right: $space-small;
+  z-index: 1;
+}
+.post-link {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-indent: -999999px;
+}
+</style>

layouts/default.vue

@@ -138,17 +138,11 @@ export default {
   float: right;
 }
 
-.avatar-menu-trigger {
-  user-select: none;
-}
 .avatar-menu-popover {
-  display: inline-block;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -15px;
-    margin-right: -15px;
     padding-top: 1rem;
     padding-bottom: 1rem;
   }