FreeTube/src/renderer/components/top-nav/top-nav.vue

64 lines
1.5 KiB
Vue
Raw Normal View History

2020-02-16 19:30:00 +01:00
<template>
<div
class="topNav"
:class="{ topNavBarColor: barColor }"
>
2020-03-24 15:34:55 +01:00
<div class="side">
<font-awesome-icon
class=" menuIcon navIcon"
icon="bars"
@click="toggleSideNav"
/>
<font-awesome-icon
class="navBackIcon navIcon"
icon="arrow-left"
@click="historyBack"
2020-02-16 19:30:00 +01:00
/>
<font-awesome-icon
2020-03-24 15:34:55 +01:00
class="navForwardIcon navIcon"
icon="arrow-right"
@click="historyForward"
/>
<font-awesome-icon
class="navSearchIcon navIcon"
icon="search"
@click="toggleSearchContainer"
/>
<div class="logo">
<div
class="logoIcon"
:class="{ logoIconBarColor: barColor }"
/>
<div
class="logoText"
:class="{ logoTextBarColor: barColor }"
/>
</div>
</div>
<div class="middle">
<div class="searchContainer">
<ft-input
placeholder="Search / Go to URL"
class="searchInput"
:is-search="true"
@click="goToSearch"
/>
<font-awesome-icon
class="navFilterIcon navIcon"
icon="filter"
@click="showFilters = !showFilters"
/>
</div>
<ft-search-filters
v-show="showFilters"
class="searchFilters"
:class="{ expand: !isSideNavOpen }"
2020-02-16 19:30:00 +01:00
/>
</div>
2020-03-24 15:34:55 +01:00
<div class="side" />
2020-02-16 19:30:00 +01:00
</div>
</template>
<script src="./top-nav.js" />
2020-03-24 15:34:55 +01:00
<style scoped lang="sass" src="./top-nav.sass" />