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; display: block;
height: calc(100vh - 60px); height: calc(100vh - 60px);
width: 200px; width: 200px;
overflow-y: auto; overflow-x: hidden;
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
margin-top: 60px; 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); background-color: var(--side-nav-color);
transition-property: width; transition-property: width;
transition-duration: 150ms; transition-duration: 150ms;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
} }
.inner {
height: 100%;
width: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.closed .inner {
width: 80px;
}
.topNavOption { .topNavOption {
margin-top: 10px; margin-top: 10px;
} }

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

@ -4,99 +4,101 @@
class="sideNav" class="sideNav"
:class="{closed: !isOpen}" :class="{closed: !isOpen}"
> >
<div <div class="inner">
class="navOption topNavOption mobileShow" <div
@click="navigate('subscriptions')" class="navOption topNavOption mobileShow"
> @click="navigate('subscriptions')"
<font-awesome-icon >
icon="rss" <font-awesome-icon
class="navIcon" icon="rss"
/> class="navIcon"
<p class="navLabel"> />
Subscriptions <p class="navLabel">
</p> Subscriptions
<font-awesome-icon </p>
class="refreshIcon" <font-awesome-icon
icon="sync" 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>
<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> </ft-flex-box>
</template> </template>