TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update NavBar.vue

Browse source
This commit is contained in:
Dragos 2022-11-08 18:59:09 +02:00 committed by GitHub
parent 6f46cfd0f6
commit 6fdf749485
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 59 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/components/NavBar.vue
View file

@ -5,7 +5,7 @@
><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" />iped</router-link ><img alt="logo" src="/img/icons/logo.svg" height="32" width="32" />iped</router-link
> >
</div> </div>
<div class="lt-md:hidden"> <div class="lt-md:hidden flex flex-1 justify-start">
<input <input
v-model="searchText" v-model="searchText"
type="text" type="text"
@ -20,50 +20,39 @@
/> />
</div> </div>
<!-- hamburger menu on mobile --> <!-- hamburger menu on mobile -->
<button class="pp-mobile-btn flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav"> <button class="pp-mobile-btn" efy_sidebar_btn="relative, pp-mobile">
<i efy_icon="menu" /> <i efy_icon="menu" />
</button> </button>
<!-- navigation bar for large screen devices --> <!-- navigation bar for large screen devices -->
<ul class="flex-1 flex justify-end flex text-1xl children:pl-3"> <div class="pp-menu flex justify-end children:pl-3">
<li v-if="shouldShowTrending"> <router-link v-if="shouldShowTrending" v-t="'titles.trending'" to="/trending" />
<router-link v-t="'titles.trending'" to="/trending" /> <router-link v-t="'titles.preferences'" to="/preferences" />
</li> <p
<li> v-if="shouldShowLogin"
<router-link v-t="'titles.preferences'" to="/preferences" /> class="cursor-pointer font-bold"
</li> v-t="'titles.account'"
<li v-if="shouldShowLogin"> @click="showLoginModal = !showLoginModal"
<p />
class="cursor-pointer font-bold" <router-link v-if="shouldShowHistory" v-t="'titles.history'" to="/history" />
v-if="shouldShowLogin" <router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" />
v-t="'titles.account'" <router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" />
@click="showLoginModal = !showLoginModal" <button
/> efy_sidebar_btn="relative, pp-desktop"
</li> style="
<li v-if="shouldShowHistory"> background: transparent;
<router-link v-t="'titles.history'" to="/history" /> -webkit-text-fill-color: var(--efy_text);
</li> padding: 0;
<li v-if="authenticated"> margin: -5rem 0 0 0;
<router-link v-t="'titles.playlists'" to="/playlists" /> border: 0;
</li> backdrop-filter: none !important;
<li v-if="!shouldShowTrending"> -webkit-backdrop-filter: none !important;
<router-link v-t="'titles.feed'" to="/feed" /> "
</li> >
</ul> <i efy_icon="menu" style="margin: 0" />
</button>
</div>
</nav> </nav>
<!-- navigation bar for mobile devices -->
<div v-if="showTopNav" class="pp-mobile-nav flex flex-col" @click="showTopNav = false">
<router-link v-if="shouldShowTrending" v-t="'titles.trending'" to="/trending" />
<router-link v-t="'titles.preferences'" to="/preferences" />
<p
class="cursor-pointer font-bold"
v-if="shouldShowLogin"
v-t="'titles.account'"
@click="showLoginModal = !showLoginModal"
/>
<router-link v-if="shouldShowHistory" v-t="'titles.history'" to="/history" />
<router-link v-if="authenticated" v-t="'titles.playlists'" to="/playlists" />
<router-link v-if="!shouldShowTrending" v-t="'titles.feed'" to="/feed" />
</div>
<!-- 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
@ -87,6 +76,35 @@
<LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" /> <LoginModal v-if="showLoginModal" @close="showLoginModal = !showLoginModal" />
</template> </template>
<style>
.pp-nav {
margin-bottom: 15rem;
}
.pp-nav > .pp-logo > a {
font-size: 25rem;
font-family: "nunito";
background: transparent;
}
.pp-nav > div input {
margin: 0 !important;
width: 300rem;
}
.pp-nav .pp-menu {
list-style: none;
display: flex;
gap: 15rem;
margin: 0;
padding: 0;
}
.pp-nav .pp-menu > * {
margin: 0;
}
.pp-logo img {
width: auto;
margin: 0 -5rem;
}
</style>
<script> <script>
import SearchSuggestions from "./SearchSuggestions.vue"; import SearchSuggestions from "./SearchSuggestions.vue";
import hotkeys from "hotkeys-js"; import hotkeys from "hotkeys-js";