2021-05-10 23:44:28 +05:30
|
|
|
<template>
|
|
|
|
<nav
|
2021-06-29 01:15:03 +05:30
|
|
|
class="uk-navbar-container uk-container-expand uk-position-relative"
|
|
|
|
:style="[{ background: backgroundColor, colour: foregroundColor }]"
|
2021-04-01 03:39:39 +05:30
|
|
|
uk-navbar
|
|
|
|
>
|
|
|
|
<div class="uk-navbar-left">
|
2021-06-29 01:15:03 +05:30
|
|
|
<router-link class="uk-navbar-item uk-logo uk-text-bold" :style="[{ colour: foregroundColor }]" to="/"
|
2021-08-22 15:57:09 +05:30
|
|
|
><img
|
|
|
|
alt="logo"
|
|
|
|
src="/img/icons/logo.svg"
|
|
|
|
height="32"
|
|
|
|
width="32"
|
|
|
|
style="margin-bottom: 6px; margin-right: -13px"
|
|
|
|
/>iped</router-link
|
2021-04-01 03:39:39 +05:30
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<div class="uk-navbar-center uk-flex uk-visible@m">
|
|
|
|
<input
|
2021-04-07 14:57:17 +05:30
|
|
|
class="uk-input uk-width-medium"
|
2021-04-01 03:39:39 +05:30
|
|
|
type="text"
|
|
|
|
placeholder="Search"
|
|
|
|
v-model="searchText"
|
2021-04-07 14:52:55 +05:30
|
|
|
@keyup="onKeyUp"
|
2021-04-01 03:39:39 +05:30
|
|
|
@focus="onInputFocus"
|
|
|
|
@blur="onInputBlur"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div class="uk-navbar-right">
|
|
|
|
<ul class="uk-navbar-nav">
|
|
|
|
<li>
|
|
|
|
<router-link to="/preferences">Preferences</router-link>
|
|
|
|
</li>
|
2021-07-17 04:26:41 +05:30
|
|
|
<li v-if="shouldShowLogin">
|
|
|
|
<router-link to="/login">Login</router-link>
|
|
|
|
</li>
|
|
|
|
<li v-if="shouldShowLogin">
|
|
|
|
<router-link to="/register">Register</router-link>
|
|
|
|
</li>
|
2021-08-22 15:57:09 +05:30
|
|
|
<li v-if="shouldShowHistory">
|
|
|
|
<router-link to="/history">History</router-link>
|
|
|
|
</li>
|
2021-07-17 04:26:41 +05:30
|
|
|
<li v-if="authenticated">
|
|
|
|
<router-link to="/feed">Feed</router-link>
|
|
|
|
</li>
|
2021-04-01 03:39:39 +05:30
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
<div class="uk-container-expand uk-hidden@m">
|
|
|
|
<input
|
|
|
|
class="uk-input"
|
|
|
|
type="text"
|
|
|
|
placeholder="Search"
|
|
|
|
v-model="searchText"
|
2021-04-07 14:52:55 +05:30
|
|
|
@keyup="onKeyUp"
|
2021-04-01 03:39:39 +05:30
|
|
|
@focus="onInputFocus"
|
|
|
|
@blur="onInputBlur"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<SearchSuggestions
|
2021-04-06 15:40:17 +05:30
|
|
|
v-show="searchText && suggestionsVisible"
|
|
|
|
:searchText="searchText"
|
|
|
|
@searchchange="onSearchTextChange"
|
2021-04-07 14:52:55 +05:30
|
|
|
ref="searchSuggestions"
|
2021-04-01 03:39:39 +05:30
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import SearchSuggestions from "@/components/SearchSuggestions";
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2021-05-10 23:44:28 +05:30
|
|
|
SearchSuggestions,
|
2021-04-01 03:39:39 +05:30
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
searchText: "",
|
2021-05-10 23:44:28 +05:30
|
|
|
suggestionsVisible: false,
|
2021-04-01 03:39:39 +05:30
|
|
|
};
|
|
|
|
},
|
2021-07-17 04:26:41 +05:30
|
|
|
computed: {
|
|
|
|
shouldShowLogin(_this) {
|
|
|
|
return _this.getAuthToken() == null;
|
|
|
|
},
|
2021-08-22 15:57:09 +05:30
|
|
|
shouldShowHistory(_this) {
|
|
|
|
return _this.getPreferenceBoolean("watchHistory", false);
|
|
|
|
},
|
2021-07-17 04:26:41 +05:30
|
|
|
},
|
2021-04-01 03:39:39 +05:30
|
|
|
methods: {
|
2021-04-07 14:52:55 +05:30
|
|
|
onKeyUp(e) {
|
2021-04-01 03:39:39 +05:30
|
|
|
if (e.key === "Enter") {
|
2021-07-15 00:52:00 +05:30
|
|
|
e.target.blur();
|
2021-04-01 03:39:39 +05:30
|
|
|
this.$router.push({
|
|
|
|
name: "SearchResults",
|
2021-05-10 23:44:28 +05:30
|
|
|
query: { search_query: this.searchText },
|
2021-04-01 03:39:39 +05:30
|
|
|
});
|
|
|
|
return;
|
2021-04-06 15:40:17 +05:30
|
|
|
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
|
|
e.preventDefault();
|
2021-04-01 03:39:39 +05:30
|
|
|
}
|
2021-04-07 14:52:55 +05:30
|
|
|
this.$refs.searchSuggestions.onKeyUp(e);
|
2021-04-01 03:39:39 +05:30
|
|
|
},
|
|
|
|
onInputFocus() {
|
|
|
|
this.suggestionsVisible = true;
|
|
|
|
},
|
|
|
|
onInputBlur() {
|
|
|
|
this.suggestionsVisible = false;
|
2021-04-06 15:40:17 +05:30
|
|
|
},
|
|
|
|
onSearchTextChange(searchText) {
|
|
|
|
this.searchText = searchText;
|
2021-05-10 23:44:28 +05:30
|
|
|
},
|
|
|
|
},
|
2021-04-01 03:39:39 +05:30
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style></style>
|