iswision-web/layouts/default.vue

<template>
  <v-app id="app">
    <v-navigation-drawer
      id="nav-drawer"
      v-model="drawer"
      clipped
      app
      dark
      temporary
    >
      <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-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>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar id="toolbar" dense fixed clipped-left app>
      <mq-layout :mq="['mobile', 'tablet']">
        <v-toolbar-side-icon
          dark
          @click.stop="drawer = !drawer"
        ></v-toolbar-side-icon>
      </mq-layout>
      <mq-layout mq="laptop+"
        ><a
          v-for="item in items"
          :key="item.title"
          class="nav"
          :href="item.to"
          ><v-icon class="menu-icon" dark>{{ item.icon }}</v-icon
          >{{ item.title }}</a
        >
      </mq-layout>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content id="contentWrapper">
      <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>
            <nuxt />
          </v-flex>
          <v-flex class="aside" xs12 md3>
            <h2>CONTACT US</h2>

            <a href="mailto:info@iswision.de">info@iswision.de</a>
            <v-divider />
            <h2>SUPPORTERS</h2>
            <div id="supporter">
              <a
                v-for="item in supporter"
                :key="item.url"
                class="supporter"
                :href="item.url"
              >
                <v-img
                  contain
                  :src="require(`@/assets/Sponsoren/${item.img} Logo.svg`)"
                />
              </a>
            </div>
            <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>

            <v-divider />

            <h2>Twitter #iswision2021</h2>
            <br />
            <a
              href="https://twitter.com/search?q=%23iswision21%20OR%20%23iswi2*%20OR%20%23iswiradio%20OR%20%23iswision"
              >Tweets about #iswision21</a
            >
            <v-divider />
            <h2>FORMER ISWIsions</h2>
            <div v-for="year in shows" :key="year">
              <a :href="'http://www.iswision.de/iswision' + year">{{ year }}</a>
              <br />
            </div>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>

export default {
  data() {
    return {
      drawer: null,
      items: [
        {
          icon: 'videocam',
          title: 'ISWIsion Live',
          to: './'
        },
        {
          icon: 'event_seat',
          title: 'Cultural Events',
          to: './cultural-events'
        },
        {
          icon: 'event',
          title: 'Schedule',
          to: 'https://2021.iswi.org/'
        },
        {
          icon: 'bubble_chart',
          title: 'about',
          to: './about'
        },
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'iswision21',
      supporter: [
        {
          img: 'iSTUFF',
          url: 'https://istuff.de/'
        },
        {
          img: 'ISWI',
          url: 'https://iswi.org/'
        },
        {
          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';
}
#toolbar,
#content{
  background-color: #402E5D;
}
#toolbar {
  z-index: 1001;
  top: auto !important;
  bottom: 0;
}
.nav {
  margin-left: 2em;
  font-size: 2em;
  color: #e1ebe7;
}

#content {
  width: 75vw;
  margin: auto;
  margin-top: 1vh;
  position: relative;
}
#contentWrapper {
  margin-bottom: 3vh;
  padding-top: 0 !important;
}

#headerPicture {
  height: 15vw;
  margin: auto;
}

#nav-drawer {
  z-index: 1002;
  background-color: #402E5D;
}
.views {
  padding-left: 3em;
  padding-right: 3em;
  width: 100%;
}

.aside {
  text-align: left;
  padding-left: 1em !important;
  font-family: 'Fira Sans Light';
}
.v-divider {
  border-color: #C74553 !important;
  margin-top: 2em;
  margin-bottom: 2em;
}
.logo {
  display: contents;
}
.logo > * {
  margin-left: 2em;
  margin-top: 5px;
  margin-bottom: 5px;
}
#supporter {
  display: flex;
  flex-wrap: wrap;
}
.supporter {
  display: contents;
}
.supporter > * {
  min-height: 5vh;
  min-width: 10vw;
  max-width: 100%;
  flex-grow: 1;
}
.social-media-link {
  margin-left: 2em;
  height: 70%;
  width: 5%;
}
.social-media {
  height: 100%;
  width: 100%;
}
.menu-icon {
  transform: translateY(-0.2em);
}
</style>
<style>
a {
  text-decoration: none;
}
.streamWrapper {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  width: 100%;
  height: auto;
}
.streamWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>