<template>
  <v-app-bar app color="rgba(255,255,255,0.3)" flat>
    <v-toolbar-title>
      <router-link :to="{name: 'pub-home'}">
        <v-img :src="require('@/assets/logo.png')"
               contain class="shrink mr-5 ml-3" transition="scale-transition" width="120"
               @click="$vuetify.goTo('#Tool')"
        />
      </router-link>
    </v-toolbar-title>

    <div v-if="$route.name === 'pub-home'">
      <div v-if="$vuetify.breakpoint.mdAndUp">
        <v-btn v-for="(link, i) in links" :key="i"
               text class="text-none font-weight-bold mx-1"
               @click="$vuetify.goTo(`#${link}`)"
               v-text="link"
        ></v-btn>
      </div>
      <div v-else>
        <v-menu bottom left offset-y content-class="elevation-0">
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>mdi-menu</v-icon>
            </v-btn>
          </template>

          <v-list color="rgba(255,255,255,1.0)">
            <v-list-item
              v-for="(link, i) in links"
              :key="i"
              @click="$vuetify.goTo(`#${link}`)"
            >
              <v-list-item-title>{{ link }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
    </div>

    <v-spacer></v-spacer>

    <div v-if="$route.name === 'pub-home'">
      <a href="https://www.mw.tum.de/lpl/startseite/" target="_blank">
        <v-img :src="require('@/assets/chair-lpl.svg')"
               contain class="shrink mr-3" transition="scale-transition" width="40"/>
      </a>
    </div>
    <div v-else>
      <v-spacer></v-spacer>
      <v-btn depressed color="white" class="mr-3" :to="{name: 'site-dashboard'}">Tool</v-btn>
    </div>
  </v-app-bar>
</template>

<script>
export default {
  name: "AppBarPublic",
  data: () => ({
    links: ['Features', 'Contributors', 'Publications', 'Contact']
  })
}
</script>

<style scoped>

</style>