tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve side bar width animation

This commit is contained in:
Cadence Ember 2020-06-20 02:20:40 +12:00
parent a6a578ffef
commit 5c67cd7271
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
2 changed files with 106 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/side-nav/side-nav.css
View File

@ -2,19 +2,30 @@
display: block;
height: calc(100vh - 60px);
width: 200px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
left: 0px;
top: 0px;
z-index: 1;
margin-top: 60px;
-webkit-box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
background-color: var(--side-nav-color);
transition-property: width;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
}
.inner {
height: 100%;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.closed .inner {
width: 80px;
}
.topNavOption {
margin-top: 10px;
}

184
src/renderer/components/side-nav/side-nav.vue
View File

@ -4,99 +4,101 @@
class="sideNav"
:class="{closed: !isOpen}"
>
<div
class="navOption topNavOption mobileShow"
@click="navigate('subscriptions')"
>
<font-awesome-icon
icon="rss"
class="navIcon"
/>
<p class="navLabel">
Subscriptions
</p>
<font-awesome-icon
class="refreshIcon"
icon="sync"
<div class="inner">
<div
class="navOption topNavOption mobileShow"
@click="navigate('subscriptions')"
>
<font-awesome-icon
icon="rss"
class="navIcon"
/>
<p class="navLabel">
Subscriptions
</p>
<font-awesome-icon
class="refreshIcon"
icon="sync"
/>
</div>
<div
class="navOption mobileHidden"
@click="navigate('trending')"
>
<font-awesome-icon
icon="fire"
class="navIcon"
/>
<p class="navLabel">
Trending
</p>
</div>
<div
class="navOption mobileHidden"
@click="navigate('popular')"
>
<font-awesome-icon
icon="users"
class="navIcon"
/>
<p class="navLabel">
Most Popular
</p>
</div>
<div
class="navOption mobileShow"
@click="navigate('userplaylists')"
>
<font-awesome-icon
icon="bookmark"
class="navIcon"
/>
<p class="navLabel">
Playlists
</p>
</div>
<side-nav-more-options
@navigate="navigate"
/>
<div
class="navOption mobileShow"
@click="navigate('history')"
>
<font-awesome-icon
icon="history"
class="navIcon"
/>
<p class="navLabel">
History
</p>
</div>
<hr>
<div
class="navOption mobileShow"
@click="navigate('settings')"
>
<font-awesome-icon
icon="sliders-h"
class="navIcon"
/>
<p class="navLabel">
Settings
</p>
</div>
<div
class="navOption mobileHidden"
@click="navigate('about')"
>
<font-awesome-icon
icon="info-circle"
class="navIcon"
/>
<p class="navLabel">
About
</p>
</div>
<hr>
</div>
<div
class="navOption mobileHidden"
@click="navigate('trending')"
>
<font-awesome-icon
icon="fire"
class="navIcon"
/>
<p class="navLabel">
Trending
</p>
</div>
<div
class="navOption mobileHidden"
@click="navigate('popular')"
>
<font-awesome-icon
icon="users"
class="navIcon"
/>
<p class="navLabel">
Most Popular
</p>
</div>
<div
class="navOption mobileShow"
@click="navigate('userplaylists')"
>
<font-awesome-icon
icon="bookmark"
class="navIcon"
/>
<p class="navLabel">
Playlists
</p>
</div>
<side-nav-more-options
@navigate="navigate"
/>
<div
class="navOption mobileShow"
@click="navigate('history')"
>
<font-awesome-icon
icon="history"
class="navIcon"
/>
<p class="navLabel">
History
</p>
</div>
<hr>
<div
class="navOption mobileShow"
@click="navigate('settings')"
>
<font-awesome-icon
icon="sliders-h"
class="navIcon"
/>
<p class="navLabel">
Settings
</p>
</div>
<div
class="navOption mobileHidden"
@click="navigate('about')"
>
<font-awesome-icon
icon="info-circle"
class="navIcon"
/>
<p class="navLabel">
About
</p>
</div>
<hr>
</ft-flex-box>
</template>