Verified Commit e09a2cf1 authored by Agate's avatar Agate 💬

Added navbar for easier navigation/language selection

parent 7991df34
......@@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>front</title>
</head>
<body>
<body class="has-navbar-fixed-top">
<noscript>
<strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
<template>
<div id="app">
<router-view></router-view>
<footer class="text container">
<nav class="navbar is-fixed-top" role="navigation">
<div class="container">
<div class="navbar-brand">
<router-link class="navbar-item" to="/">
<img class="logo" src="/logo-full.png" alt="Funkwhale logo">
</router-link>
<a role="button" :class="['navbar-burger', {'is-active': showNav}]" @click="showNav = !showNav" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div :class="['navbar-menu', {'is-active': showNav}]">
<div class="navbar-end">
<div class="navbar-item">
<label for="language" class="label">
<translate translate-context="Label for language switcher">
Language
</translate>
</label>
<select id="language" name="language" v-model="$language.current">
<option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
</select>
</div>
</div>
</div>
</div>
</nav>
<div>
<label for="language" class="label" v-translate>Language</label>
<select id="language" name="language" v-model="$language.current">
<option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
</select>
</div>
</footer>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
showNav: false
}
}
}
</script>
<style lang="scss">
.container.text {
......@@ -34,4 +65,10 @@ hr.hidden {
hr.small {
margin: 0.5em 0;
}
.navbar {
box-shadow: 0em 0.05em 1em rgba(0, 0, 0, 0.1);
.label {
margin-right: 1em;
}
}
</style>
......@@ -46,9 +46,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.main.container {
max-width: 1200px;
}
@media screen and (min-width: 769px) {
.menu-wrapper {
position: fixed;
......
<template>
<section class="section">
<div class="text container">
<div class="container text">
<img src="/logo-full.png" alt="Funkwhale logo">
</div>
<hr class="hidden">
<h1 class="title" v-translate>How to help?</h1>
<p v-translate>Do you want to help the project but don't know where to start? Tell us how much time you can spend and we'll get you started!</p>
<hr class="hidden">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment