Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-15 20:58:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update NavBar.vue

Browse Source
This commit is contained in:
Dragos 2022-09-05 20:40:28 +03:00 committed by GitHub
parent bf1ab3926e
commit 2dd3e8a859
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/NavBar.vue
View File

@ -1,20 +1,13 @@
<template> <template>
<nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative"> <nav class="pp-nav flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
<div class="flex-1 flex justify-start"> <div class="flex-1 flex justify-start pp-logo">
<router-link class="flex font-bold text-3xl items-center font-sans" to="/" <router-link class="flex font-bold text-3xl items-center font-sans" to="/"
><img ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" />iped</router-link
alt="logo"
src="/img/icons/logo.svg"
height="32"
width="32"
class="w-10 mr-[-0.6rem]"
/>iped</router-link
> >
</div> </div>
<div class="lt-md:hidden"> <div class="lt-md:hidden">
<input <input
v-model="searchText" v-model="searchText"
class="input w-72 h-10"
type="text" type="text"
role="search" role="search"
ref="videoSearch" ref="videoSearch"
@ -26,14 +19,12 @@
@blur="onInputBlur" @blur="onInputBlur"
/> />
</div> </div>
<!-- three vertical lines for toggling the hamburger menu on mobile --> <!-- hamburger menu on mobile -->
<button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav"> <button class="pp-mobile-btn flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
<span class="line"></span> <i efy_icon="menu" />
<span class="line"></span>
<span class="line"></span>
</button> </button>
<!-- navigation bar for large screen devices --> <!-- navigation bar for large screen devices -->
<ul class="hidden md:(flex-1 flex justify-end flex text-1xl children:pl-3)"> <ul class="flex-1 flex justify-end flex text-1xl children:pl-3">
<li v-if="shouldShowTrending"> <li v-if="shouldShowTrending">
<router-link v-t="'titles.trending'" to="/trending" /> <router-link v-t="'titles.trending'" to="/trending" />
</li> </li>
@ -58,38 +49,19 @@
</ul> </ul>
</nav> </nav>
<!-- navigation bar for mobile devices --> <!-- navigation bar for mobile devices -->
<ul <div v-if="showTopNav" class="pp-mobile-nav flex flex-col" @click="showTopNav = false">
v-if="showTopNav" <router-link v-if="shouldShowTrending" v-t="'titles.trending'" to="/trending" />
class="flex flex-col justify-center items-end mb-4 children:(my-0.5 mr-5)" <router-link v-t="'titles.preferences'" to="/preferences" />
@click="showTopNav = false" <router-link v-if="shouldShowLogin" v-t="'titles.login'" to="/login" />
> <router-link v-if="shouldShowLogin" v-t="'titles.register'" to="/register" />
<li v-if="shouldShowTrending"> <router-link v-if="shouldShowHistory" v-t="'titles.history'" to="/history" />
<router-link v-t="'titles.trending'" to="/trending" /> <router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" />
</li> <router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" />
<li> </div>
<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="!shouldShowTrending">
<router-link v-t="'titles.feed'" to="/feed" />
</li>
</ul>
<!-- search suggestions for mobile devices --> <!-- search suggestions for mobile devices -->
<div class="w-{full - 4} md:hidden mx-2"> <div class="w-{full - 4} md:hidden mx-2">
<input <input
v-model="searchText" v-model="searchText"
class="input h-10 w-full"
type="text" type="text"
role="search" role="search"
:title="$t('actions.search')" :title="$t('actions.search')"