safetwitch/src/components/NavbarView.vue

72 lines
2.1 KiB
Vue
Raw Normal View History

2023-03-18 13:49:02 -04:00
<script lang="ts">
2023-07-26 18:09:08 -04:00
import { ref } from 'vue'
2023-04-16 12:37:23 -04:00
import SearchBar from './SearchBar.vue'
export default {
components: {
2023-09-16 11:44:43 -04:00
SearchBar
2023-07-26 18:09:08 -04:00
},
setup() {
return {
open: ref(false)
}
},
methods: {
toggle() {
2023-08-18 13:39:26 -04:00
this.open = !this.open
2023-07-26 18:09:08 -04:00
}
2023-08-19 20:37:11 -04:00
},
mounted() {
const savedLocale = localStorage.getItem('language')
if(savedLocale) {
this.$i18n.locale = savedLocale
}
2023-04-16 12:37:23 -04:00
}
}
2023-03-18 13:49:02 -04:00
</script>
<template>
2023-08-18 13:39:26 -04:00
<nav class="flex items-center justify-between flex-wrap p-4">
2023-09-25 17:25:42 -04:00
<div class="flex items-center flex-no-shrink text-contrast mr-6">
2023-08-18 13:39:26 -04:00
<router-link to="/">
2023-09-24 11:47:48 -04:00
<h1 class="font-bold text-2xl">Safe<color class="text-purple">Twitch</color></h1>
2023-08-18 13:39:26 -04:00
</router-link>
</div>
2023-03-18 13:49:02 -04:00
2023-08-18 13:39:26 -04:00
<search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
2023-10-04 21:41:38 -04:00
<div class="text-contrast hidden space-x-4 sm:block">
2023-08-18 13:39:26 -04:00
<a
href="https://codeberg.org/dragongoose/safetwitch"
2023-09-10 13:41:05 -04:00
target="_blank"
2023-08-18 13:39:26 -04:00
>{{ $t('nav.code') }}</a
>
2023-10-04 21:41:38 -04:00
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
<router-link to="/privacy">{{
2023-08-18 13:39:26 -04:00
$t('nav.privacy')
}}</router-link>
2023-08-19 20:37:11 -04:00
<router-link to="/settings">{{ $t("nav.settings") }}</router-link>
2023-08-18 13:39:26 -04:00
</div>
2023-07-26 18:09:08 -04:00
2023-08-18 13:39:26 -04:00
<div class="block sm:hidden">
<button @click="toggle" class="flex items-center px-3 py-2">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
2023-07-26 18:09:08 -04:00
2023-08-18 13:39:26 -04:00
<div :class="open ? 'block' : 'hidden'" class="w-full flex-grow">
2023-09-25 17:25:42 -04:00
<div class="p-4 flex flex-col items-center space-y-5 text-contrast">
2023-08-18 13:39:26 -04:00
<search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
2023-10-21 12:31:31 -04:00
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
2023-08-18 13:39:26 -04:00
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
2023-08-19 20:37:11 -04:00
<router-link to="/settings">{{ $t("nav.settings") }}</router-link>
2023-08-18 13:39:26 -04:00
</ul>
2023-07-26 18:09:08 -04:00
</div>
2023-08-18 13:39:26 -04:00
</div>
</nav>
2023-03-18 13:49:02 -04:00
</template>