pixelfed/resources/assets/components/partials/drawer.vue

107 lines
2.4 KiB
Vue

<template>
<div class="app-drawer-component">
<div class="mobile-footer-spacer d-block d-sm-none mt-5"></div>
<div class="mobile-footer d-block d-sm-none fixed-bottom">
<div class="card card-body rounded-0 px-0 pt-2 pb-3 box-shadow" style="border-top:1px solid var(--border-color)">
<ul class="nav nav-pills nav-fill d-flex align-items-middle">
<li class="nav-item">
<router-link class="nav-link text-dark" to="/i/web">
<p>
<i class="far fa-home fa-lg"></i>
</p>
<p class="nav-link-label">
<span>Home</span>
</p>
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link text-dark" to="/i/web/timeline/local">
<p>
<i class="far fa-stream fa-lg"></i>
</p>
<p class="nav-link-label">
<span>Local</span>
</p>
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link text-dark" to="/i/web/compose">
<p>
<i class="far fa-plus-circle fa-lg"></i>
</p>
<p class="nav-link-label">
<span>New</span>
</p>
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link text-dark" to="/i/web/notifications">
<p>
<i class="far fa-bell fa-lg"></i>
</p>
<p class="nav-link-label">
<span>Alerts</span>
</p>
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link text-dark" :to="'/i/web/profile/' + user.id">
<p>
<i class="far fa-user fa-lg"></i>
</p>
<p class="nav-link-label">
<span>Profile</span>
</p>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
user: window._sharedData.user
}
}
}
</script>
<style lang="scss">
.app-drawer-component {
.nav-link {
padding: 0.5rem 0.1rem;
&.active {
background-color: transparent;
}
&.router-link-exact-active {
background-color: transparent;
color: var(--primary) !important;
}
p {
margin-bottom: 0;
}
&-label {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
margin-top: 0;
font-size: 10px;
text-transform: uppercase;
font-weight: 700;
opacity: 0.6;
}
}
}
</style>