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" v-if="item.relative" :to="item.to" ripple>
            <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>
          </v-list-tile>
          <v-list-tile :key="item.text" :href="item.to"  v-if="!item.relative" ripple>
              <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>
          </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+">
        <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"
          :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
                  :id="item.img"
                  :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-divider />
            <a href="https://fem.tu-ilmenau.de/impressum/">Imprint</a>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: null,
      items: [
        {
          icon: "videocam",
          title: "ISWIsion Live",
          relative: true,
          to: "/"
        },
        {
          icon: "event_seat",
          title: "Cultural Events",
          relative: true,
          to: "/cultural-events"
        },
        {
          icon: "event",
          title: "Schedule",
          relative: false,
          to: "https://2021.iswi.org/"
        },
        {
          icon: "bubble_chart",
          title: "about",
          relative: true,
          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";
}

#content {
  background-color: #402e5d;
}

#toolbar {
  z-index: 1001;
  top: auto !important;
  bottom: 0;
  background-color: #dbdee8;
}
#toolbar * {
  color: #402e5d;
}

.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;
}

.supporter > #ISWI {
  min-height: 13vh;
}

.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;
  color: #c74553;
}
.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>