set link color

layouts/default.vue

@@ -11,15 +11,23 @@
       <v-list dense>
         <template v-for="item in items">
           <v-list-tile :key="item.text" ripple>
-            <a :href="item.to">
-            <v-list-tile-action>
+            <v-list-tile-action v-if="item.relative">
               <v-icon dark>{{ item.icon }}</v-icon>
             </v-list-tile-action>
-            <v-list-tile-content>
+            <v-list-tile-content v-if="item.relative">
               <v-list-tile-title>
                 {{ item.title }}
               </v-list-tile-title>
             </v-list-tile-content>
+            <a :href="item.to"  v-if="!item.relative">
+              <v-list-tile-action>
+                <v-icon dark>{{ item.icon }}</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>
+                  {{ item.title }}
+                </v-list-tile-title>
+              </v-list-tile-content>
             </a>
           </v-list-tile>
         </template>
@@ -32,8 +40,17 @@
           @click.stop="drawer = !drawer"
         ></v-toolbar-side-icon>
       </mq-layout>
-      <mq-layout mq="laptop+"
-        ><a
+      <mq-layout mq="laptop+">
+        <nuxt-link
+          v-for="item in items"
+          v-if="item.relative"
+          :key="item.title"
+          class="nav"
+          :to="item.to"
+          ><v-icon class="menu-icon" dark>{{ item.icon }}</v-icon
+          >{{ item.title }}</nuxt-link
+        >
+        <a v-if="!item.relative"
           v-for="item in items"
           :key="item.title"
           class="nav"
@@ -45,11 +62,7 @@
       <v-spacer></v-spacer>
     </v-toolbar>
     <v-content id="contentWrapper">
-      <v-img
-        id="headerPicture"
-        contain
-        :src="require('@/assets/header.svg')"
-      />
+      <v-img id="headerPicture" contain :src="require('@/assets/header.svg')" />
       <v-container id="content" grid-list-md text-xs-center>
         <v-layout row wrap>
           <v-flex class="views" xs12 md9>
@@ -75,14 +88,16 @@
                 />
               </a>
             </div>
-            <v-divider/>
+            <v-divider />
 
             <h2>SOCIAL MEDIA</h2>
-            <a href="https://fem.social/@istuff">MASTODON</a><br>
-            <a href="https://www.facebook.com/istuff.de">FACEBOOK</a><br>
-            <a href="https://twitter.com/iSTUFFde">TWITTER</a><br>
-            <a href="https://www.instagram.com/istuff.de">INSTAGRAM</a><br>
-            <a href="https://www.youtube.com/channel/UC-bK-h5jf5av0OjLuewhOxw">YOUTUBE</a><br>
+            <a href="https://fem.social/@istuff">MASTODON</a><br />
+            <a href="https://www.facebook.com/istuff.de">FACEBOOK</a><br />
+            <a href="https://twitter.com/iSTUFFde">TWITTER</a><br />
+            <a href="https://www.instagram.com/istuff.de">INSTAGRAM</a><br />
+            <a href="https://www.youtube.com/channel/UC-bK-h5jf5av0OjLuewhOxw"
+              >YOUTUBE</a
+            ><br />
 
             <v-divider />
 
@@ -106,76 +121,79 @@
 </template>
 
 <script>
-
 export default {
   data() {
     return {
       drawer: null,
       items: [
         {
-          icon: 'videocam',
-          title: 'ISWIsion Live',
-          to: './'
+          icon: "videocam",
+          title: "ISWIsion Live",
+          relative: true,
+          to: "./"
         },
         {
-          icon: 'event_seat',
-          title: 'Cultural Events',
-          to: './cultural-events'
+          icon: "event_seat",
+          title: "Cultural Events",
+          relative: true,
+          to: "./cultural-events"
         },
         {
-          icon: 'event',
-          title: 'Schedule',
-          to: 'https://2021.iswi.org/'
+          icon: "event",
+          title: "Schedule",
+          relative: false,
+          to: "https://2021.iswi.org/"
         },
         {
-          icon: 'bubble_chart',
-          title: 'about',
-          to: './about'
-        },
+          icon: "bubble_chart",
+          title: "about",
+          relative: true,
+          to: "./about"
+        }
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'iswision21',
+      title: "iswision21",
       supporter: [
         {
-          img: 'iSTUFF',
-          url: 'https://istuff.de/'
+          img: "iSTUFF",
+          url: "https://istuff.de/"
         },
         {
-          img: 'ISWI',
-          url: 'https://iswi.org/'
+          img: "ISWI",
+          url: "https://iswi.org/"
         },
         {
-          img: 'FeM',
-          url: 'https://fem.tu-ilmenau.de/'
+          img: "FeM",
+          url: "https://fem.tu-ilmenau.de/"
         }
       ],
       shows: [2003, 2005, 2007, 2009, 2011, 2013, 2015, 2017, 2019]
-    }
+    };
   }
-}
+};
 </script>
 
 <style scoped>
 #app {
   background-color: #fff;
   color: #e1ebe7;
-  font-family: 'Fira Sans';
+  font-family: "Fira Sans";
 }
 
-#content{
-  background-color: #402E5D;
+#content {
+  background-color: #402e5d;
 }
 
 #toolbar {
   z-index: 1001;
   top: auto !important;
   bottom: 0;
-  background-color: #DBDEE8;
+  background-color: #dbdee8;
 }
 #toolbar * {
-  color: #402E5D;
+  color: #402e5d;
 }
 
 .nav {
@@ -202,7 +220,7 @@ export default {
 
 #nav-drawer {
   z-index: 1002;
-  background-color: #402E5D;
+  background-color: #402e5d;
 }
 .views {
   padding-left: 3em;
@@ -213,10 +231,10 @@ export default {
 .aside {
   text-align: left;
   padding-left: 1em !important;
-  font-family: 'Fira Sans Light';
+  font-family: "Fira Sans Light";
 }
 .v-divider {
-  border-color: #C74553 !important;
+  border-color: #c74553 !important;
   margin-top: 2em;
   margin-bottom: 2em;
 }
@@ -262,6 +280,7 @@ export default {
 <style>
 a {
   text-decoration: none;
+  color: #c74553;
 }
 .streamWrapper {
   position: relative;