fix nuxt menu links

This commit is contained in:
garionion 2021-05-25 17:38:31 +02:00
parent 88c5c5992e
commit ba66d2274b

View file

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