Skip to content

add explore tab to navbar #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 4, 2022
Merged

add explore tab to navbar #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6bb434
chore: added dropdown menu to explore tab
mickvandijke Oct 4, 2022
8dfa820
chore: make search bar text smaller
mickvandijke Oct 4, 2022
3e236d7
chore: updated user dropdown menu
mickvandijke Oct 4, 2022
827b031
chore: moved explore tab to the left
mickvandijke Oct 4, 2022
a77aa44
chore: added explore tab to mobile
mickvandijke Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 94 additions & 26 deletions src/components/navigation/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,61 @@
<template>
<div class="flex flex-col sticky top-0 h-16 md:h-20 justify-center bg-slate-900/85 border-b lg:border-0 border-slate-800/50 z-50 max-w-full" style="backdrop-filter: blur(20px);">
<div class="flex flex-col sticky top-0 h-16 md:h-20 justify-center bg-slate-900/90 border-b lg:border-0 border-slate-800/50 z-50 max-w-full" style="backdrop-filter: blur(20px);">
<div class="px-4 md:px-8 flex flex-col w-full">

<!-- MOBILE -->
<div id="mobile-menu" class="flex md:hidden flex-row items-center max-w-full">

<div id="open-mobile-search-bar-toggle" v-if="mobileState === MobileStates.Navigate" class="px-3.5 h-10 mr-3 flex md:hidden flex-col justify-center items-center bg-white/5 border border-slate-600 rounded-2xl">
<div id="open-mobile-search-bar-toggle" v-if="mobileState === MobileStates.Navigate" class="px-3.5 h-10 mr-1 flex md:hidden flex-col justify-center items-center bg-white/5 border border-slate-600 rounded-2xl">
<button class="flex flex-col" @click="mobileState = MobileStates.Search">
<SearchIcon size="18" class="text-slate-400" />
</button>
</div>

<div id="tabs" class="flex flex-row">
<div class="flex flex-col">
<span
id="explore"
class="px-6 h-10 flex flex-row flex-nowrap items-center appearance-none text-lg text-slate-200 hover:text-white font-medium cursor-pointer duration-200"
@mouseover="dropdownOpened = true"
@mouseleave="dropdownOpened = false"
>
<span>Explore</span>
<!-- <ChevronDownIcon size="18" class="ml-1"></ChevronDownIcon>-->
<div
class="absolute -ml-4 pt-60 z-10"
:class="{hidden: !dropdownOpened}"
>
<div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow">
<ul class="text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/trending" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Trending Torrents</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/popular" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Most Popular Torrents</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/recent" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Most Recent Torrents</span>
</router-link>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
<div id="extra-options" v-if="mobileState === MobileStates.Navigate" class="flex flex-row flex-1 ml-auto items-center justify-end">
<Profile class="mr-3" />

<router-link to="/upload" class="px-4 h-10 inline-flex flex-nowrap justify-center items-center self-start appearance-none bg-sky-500 hover:bg-sky-600 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200">
<UploadIcon size="24" />
</router-link>
</div>

<div id="mobile-search-bar" v-if="mobileState === MobileStates.Search" class="block md:hidden grow">
<div class="flex flex-col mr-3">
<div class="flex flex-col">
<div class="px-3.5 bg-slate-800/60 border border-slate-600 focus:border-slate-400 rounded-2xl duration-200">
<div class="px-3.5 bg-slate-800/60 text-sm border border-slate-600 focus:border-slate-400 rounded-2xl duration-200">
<div class="flex flex-row items-center">
<div class="flex flex-col grow">
<input
Expand All @@ -38,32 +72,67 @@
</div>
</div>
</div>

<div id="close-mobile-search-bar-toggle" v-if="mobileState === MobileStates.Search" class="px-4 h-12 flex md:hidden flex-col justify-center items-center bg-white/5 rounded-2xl">
<button class="flex flex-col" @click="mobileState = MobileStates.Navigate">
<XIcon size="18" class="text-slate-400" />
</button>
</div>

</div>

<!-- DESKTOP -->
<div id="desktop-menu" class="hidden md:flex flex-row items-center max-w-full">

<div id="site-name" class="hidden md:flex flex-row flex-1 mr-auto justify-start">
<div class="flex flex-col">
<router-link class="block text-2xl text-white duration-200" to="/">
<div class="flex flex-row flex-nowrap">
<span class="block w-full text-3xl font-semibold">{{ $store.state.settings.website.name }}</span>
</div>
</router-link>
<div id="left-menu" class="hidden md:flex flex-row flex-1 justify-start">
<div id="site-name" class="hidden md:flex flex-row">
<div class="flex flex-col">
<router-link class="block text-2xl text-white duration-200" to="/">
<div class="flex flex-row flex-nowrap">
<span class="block w-full text-3xl font-semibold">{{ $store.state.settings.website.name }}</span>
</div>
</router-link>
</div>
</div>
<div id="tabs" class="flex flex-row ml-3">
<div class="flex flex-col">
<span
id="explore"
class="px-6 h-10 flex flex-row flex-nowrap items-center appearance-none text-lg text-slate-200 hover:text-white font-medium cursor-pointer duration-200"
@mouseover="dropdownOpened = true"
@mouseleave="dropdownOpened = false"
>
<span>Explore</span>
<!-- <ChevronDownIcon size="18" class="ml-1"></ChevronDownIcon>-->
<div
class="absolute -ml-4 pt-60 z-10"
:class="{hidden: !dropdownOpened}"
>
<div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow">
<ul class="text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/trending" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Trending Torrents</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/popular" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Most Popular Torrents</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/torrents/recent" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Most Recent Torrents</span>
</router-link>
</li>
</ul>
</div>
</div>
</span>
</div>
</div>
</div>

<div id="search-bar" class="hidden md:block mx-5 grow max-w-lg">
<div class="flex flex-col">
<div class="flex flex-col">
<div class="px-3.5 bg-slate-800/60 border border-transparent hover:border-slate-600 focus:border-slate-400 rounded-2xl duration-200">
<div class="px-3.5 bg-slate-800/60 text-sm border border-transparent hover:border-slate-600 focus:border-slate-400 rounded-2xl duration-200">
<div class="flex flex-row items-center">
<div class="mr-3 flex flex-col">
<SearchIcon size="18" class="text-slate-400" />
Expand All @@ -83,17 +152,15 @@
</div>
</div>
</div>

<div id="extra-options" class="flex flex-row flex-1 ml-auto items-center justify-end">
<Profile class="mr-3" />

<router-link to="/upload" class="px-6 h-10 inline-flex flex-nowrap justify-center items-center self-start appearance-none bg-sky-500 hover:bg-sky-600 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200">
<UploadIcon size="24" class="mr-3" />
<router-link to="/upload" class="px-4 h-10 inline-flex flex-nowrap justify-center items-center self-start appearance-none bg-sky-500 hover:bg-sky-600 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200">
<UploadIcon size="18" class="mr-3" />
<span class="flex flex-nowrap whitespace-nowrap">Upload torrent</span>
</router-link>
</div>

</div>

</div>
</div>
</template>
Expand All @@ -104,11 +171,11 @@ import Profile from "./Profile.vue";
import Logo from "../Logo.vue";
import Breadcrumb from "../Breadcrumb.vue";
import Sidebar from "./Sidebar.vue";
import { SearchIcon, UploadIcon, XIcon } from "@vue-hero-icons/outline"
import { SearchIcon, UploadIcon, XIcon, ChevronDownIcon } from "@vue-hero-icons/outline"

export default {
name: 'Navbar',
components: {Sidebar, Breadcrumb, Profile, Logo, SearchIcon, UploadIcon, XIcon},
components: {Sidebar, Breadcrumb, Profile, Logo, SearchIcon, UploadIcon, XIcon, ChevronDownIcon},
computed: {
...mapState({})
},
Expand All @@ -119,6 +186,7 @@ export default {
}),
mobileState: 1,
searchQuery: '',
dropdownOpened: false,
}),
methods: {
submitSearch() {
Expand Down
57 changes: 30 additions & 27 deletions src/components/navigation/Profile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,55 @@
<template>
<div class="relative inline-block text-left" v-click-outside="() => (dropdownOpened = false)">

<button
<span
v-if="$store.getters.isLoggedIn"
id="profile-button"
class="px-6 h-10 inline-flex justify-center items-center self-start appearance-none bg-white hover:bg-gray-200 text-sm text-black font-medium rounded-2xl cursor-pointer duration-200"
class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 hover:bg-slate-700 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
@click="dropdownOpened = !dropdownOpened"
@mouseleave="dropdownOpened = false"
>
<UserCircleIcon size="24" class="mr-3" />
<span class="flex flex-nowrap whitespace-nowrap">{{ user.username }}</span>
<ChevronDownIcon
class="w-5 h-5 ml-2 -mr-1"
class="w-5 h-5 ml-2 -mr-1 opacity-50"
aria-hidden="true"
/>
</button>
<div
class="absolute pt-60 z-10"
:class="{hidden: !dropdownOpened}"
>
<div @click.prevent="dropdownOpened = false" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow">
<ul class="text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link :to="`/profile/${user.username}`" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">My Profile</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-slate-700 hover:text-white duration-200">
<router-link to="/settings/general" replace class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Settings</span>
</router-link>
</li>
<li class="p-4 w-full hover:bg-red-700 hover:text-white duration-200">
<a @click="$store.dispatch('logout')" class="inline-flex items-center">
<span class="flex flex-nowrap whitespace-nowrap">Sign Out</span>
</a>
</li>
</ul>
</div>
</div>
</span>

<button
v-else
id="sign-in-button"
class="px-6 h-10 inline-flex justify-center items-center self-start appearance-none bg-white hover:bg-gray-200 text-sm text-black font-medium rounded-2xl cursor-pointer duration-200"
class="px-4 h-10 inline-flex justify-center items-center self-start appearance-none bg-slate-800 hover:bg-slate-700 text-sm text-white font-medium rounded-2xl cursor-pointer duration-200"
@click="$store.dispatch('openAuthModal')"
>
<UserCircleIcon size="24" class="mr-3" />
<span class="flex flex-nowrap whitespace-nowrap">Sign in</span>
</button>

<div
id="dropdown-menu"
class="origin-top-right absolute right-0 mt-4 z-10"
:class="{hidden: !dropdownOpened}"
>
<div @click.prevent="() => (dropdownOpened = false)" class="w-48 divide-y divide-slate-100 bg-slate-800 rounded-2xl overflow-hidden drop-shadow-md">
<ul class="px-2 py-2 text-sm text-slate-400 font-medium duration-200" aria-labelledby="dropdownDefault">
<li v-if="$store.getters.isAdministrator">
<router-link to="/settings/general" replace class="h-10 inline-flex items-center py-2 px-4 w-full hover:bg-slate-700 hover:text-white duration-200 rounded-2xl">
<span class="flex flex-nowrap whitespace-nowrap">Settings</span>
</router-link>
</li>
<li class="mt-1">
<a
@click="$store.dispatch('logout')"
class="h-10 inline-flex items-center py-2 px-4 w-full hover:bg-red-600 hover:text-white text-left cursor-pointer duration-200 rounded-2xl"
>Sign out</a>
</li>
</ul>
</div>
</div>

</div>
</template>

Expand Down