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