mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-10 10:18:23 +00:00
responsive navigation bar
This commit is contained in:
parent
a4588b643f
commit
07dcbd66d4
@ -208,4 +208,8 @@ h2 {
|
||||
.auto .link-secondary {
|
||||
@apply dark:(text-gray-300 hover:(text-gray-400 underline underline-gray-400));
|
||||
}
|
||||
|
||||
.line {
|
||||
@apply px-2.5 py-0.25 my-0.45 rounded-xl bg-white;
|
||||
}
|
||||
</style>
|
||||
|
@ -26,32 +26,61 @@
|
||||
@blur="onInputBlur"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 flex justify-end">
|
||||
<ul class="flex text-1xl children:pl-3">
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- three vertical lines for toggling the hamburger menu on mobile -->
|
||||
<button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<!-- navigation bar for large screen devices -->
|
||||
<ul class="hidden md:(flex-1 flex justify-end flex text-1xl children:pl-3)">
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated && !shouldShowTrending">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- navigation bar for mobile devices -->
|
||||
<ul v-if="showTopNav" class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)">
|
||||
<li v-if="shouldShowTrending">
|
||||
<router-link v-t="'titles.trending'" to="/trending" />
|
||||
</li>
|
||||
<li>
|
||||
<router-link v-t="'titles.preferences'" to="/preferences" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.login'" to="/login" />
|
||||
</li>
|
||||
<li v-if="shouldShowLogin">
|
||||
<router-link v-t="'titles.register'" to="/register" />
|
||||
</li>
|
||||
<li v-if="shouldShowHistory">
|
||||
<router-link v-t="'titles.history'" to="/history" />
|
||||
</li>
|
||||
<li v-if="authenticated">
|
||||
<router-link v-t="'titles.playlists'" to="/playlists" />
|
||||
</li>
|
||||
<li v-if="authenticated && !shouldShowTrending">
|
||||
<router-link v-t="'titles.feed'" to="/feed" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="w-full md:hidden">
|
||||
<input
|
||||
v-model="searchText"
|
||||
@ -85,6 +114,7 @@ export default {
|
||||
return {
|
||||
searchText: "",
|
||||
suggestionsVisible: false,
|
||||
showTopNav: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
Loading…
Reference in New Issue
Block a user