2020-02-16 18:30:00 +00:00
|
|
|
<template>
|
2020-02-27 03:10:56 +00:00
|
|
|
<div
|
|
|
|
class="topNav"
|
|
|
|
:class="{ topNavBarColor: barColor }"
|
|
|
|
>
|
2020-03-24 14:34:55 +00:00
|
|
|
<div class="side">
|
|
|
|
<font-awesome-icon
|
2020-03-26 14:17:59 +00:00
|
|
|
class="menuIcon navIcon"
|
2020-03-24 14:34:55 +00:00
|
|
|
icon="bars"
|
2021-04-27 20:29:28 +00:00
|
|
|
role="button"
|
|
|
|
tabindex="0"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="toggleSideNav"
|
2021-04-27 20:29:28 +00:00
|
|
|
@keypress="toggleSideNav"
|
2020-03-24 14:34:55 +00:00
|
|
|
/>
|
|
|
|
<font-awesome-icon
|
2021-09-16 22:58:03 +00:00
|
|
|
id="historyArrowBack"
|
|
|
|
class="navBackIcon navIcon fa-arrow-left"
|
2020-03-24 14:34:55 +00:00
|
|
|
icon="arrow-left"
|
2021-04-27 20:29:28 +00:00
|
|
|
role="button"
|
|
|
|
tabindex="0"
|
2022-03-26 01:20:22 +00:00
|
|
|
:title="backwardText"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="historyBack"
|
2021-04-27 20:29:28 +00:00
|
|
|
@keypress="historyBack"
|
2020-02-16 18:30:00 +00:00
|
|
|
/>
|
|
|
|
<font-awesome-icon
|
2021-09-16 22:58:03 +00:00
|
|
|
id="historyArrowForward"
|
|
|
|
class="navForwardIcon navIcon fa-arrow-right"
|
2020-03-24 14:34:55 +00:00
|
|
|
icon="arrow-right"
|
2021-04-27 20:29:28 +00:00
|
|
|
role="button"
|
|
|
|
tabindex="0"
|
2021-05-01 00:36:46 +00:00
|
|
|
:title="forwardText"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="historyForward"
|
2021-04-27 20:29:28 +00:00
|
|
|
@keypress="historyForward"
|
2020-03-24 14:34:55 +00:00
|
|
|
/>
|
|
|
|
<font-awesome-icon
|
|
|
|
class="navSearchIcon navIcon"
|
|
|
|
icon="search"
|
2021-04-27 20:29:28 +00:00
|
|
|
role="button"
|
|
|
|
tabindex="0"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="toggleSearchContainer"
|
2021-04-27 20:29:28 +00:00
|
|
|
@keypress="toggleSearchContainer"
|
2020-03-24 14:34:55 +00:00
|
|
|
/>
|
2021-04-15 18:28:35 +00:00
|
|
|
<font-awesome-icon
|
|
|
|
class="navNewWindowIcon navIcon"
|
|
|
|
icon="clone"
|
2021-04-30 21:18:45 +00:00
|
|
|
:title="newWindowText"
|
2021-05-01 00:36:46 +00:00
|
|
|
@click="createNewWindow"
|
2021-04-15 18:28:35 +00:00
|
|
|
/>
|
2021-08-24 22:14:37 +00:00
|
|
|
<div
|
|
|
|
class="logo"
|
|
|
|
role="link"
|
|
|
|
tabindex="0"
|
|
|
|
:title="$t('Subscriptions.Subscriptions')"
|
|
|
|
@click="navigate('subscriptions')"
|
|
|
|
@keydown.space.prevent="navigate('subscriptions')"
|
|
|
|
@keydown.enter.prevent="navigate('subscriptions')"
|
|
|
|
>
|
2020-03-24 14:34:55 +00:00
|
|
|
<div
|
|
|
|
class="logoIcon"
|
|
|
|
/>
|
|
|
|
<div
|
|
|
|
class="logoText"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="middle">
|
|
|
|
<div class="searchContainer">
|
|
|
|
<ft-input
|
2020-08-07 00:20:42 +00:00
|
|
|
:placeholder="$t('Search / Go to URL')"
|
2020-03-24 14:34:55 +00:00
|
|
|
class="searchInput"
|
|
|
|
:is-search="true"
|
2021-04-15 19:30:26 +00:00
|
|
|
:select-on-focus="true"
|
2020-06-02 02:42:29 +00:00
|
|
|
:data-list="searchSuggestionsDataList"
|
2021-06-15 14:42:37 +00:00
|
|
|
:spellcheck="false"
|
2021-09-06 10:09:11 +00:00
|
|
|
:show-clear-text-button="true"
|
2020-06-02 02:42:29 +00:00
|
|
|
@input="getSearchSuggestionsDebounce"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="goToSearch"
|
|
|
|
/>
|
|
|
|
<font-awesome-icon
|
|
|
|
class="navFilterIcon navIcon"
|
2021-05-25 17:54:27 +00:00
|
|
|
:class="{ filterChanged: searchFilterValueChanged }"
|
2020-03-24 14:34:55 +00:00
|
|
|
icon="filter"
|
2021-04-27 20:29:28 +00:00
|
|
|
role="button"
|
|
|
|
tabindex="0"
|
2020-03-24 14:34:55 +00:00
|
|
|
@click="showFilters = !showFilters"
|
2021-04-27 20:29:28 +00:00
|
|
|
@keypress="showFilters = !showFilters"
|
2020-03-24 14:34:55 +00:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<ft-search-filters
|
|
|
|
v-show="showFilters"
|
|
|
|
class="searchFilters"
|
|
|
|
:class="{ expand: !isSideNavOpen }"
|
2021-05-25 17:54:27 +00:00
|
|
|
@filterValueUpdated="handleSearchFilterValueChanged"
|
2020-02-16 18:30:00 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2020-08-31 21:35:22 +00:00
|
|
|
<ft-profile-selector class="side profiles" />
|
2020-02-16 18:30:00 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./top-nav.js" />
|
2020-03-24 14:34:55 +00:00
|
|
|
<style scoped lang="sass" src="./top-nav.sass" />
|