Showing overflowing menu items in header on mobile. Added search to sidebar (WIP). Added breakpoint.
This commit is contained in:
DebaucheryLibrarian
parent
0e3145a051
commit
08db1d63bf
|
|
@ -96,11 +96,11 @@ export default {
|
|||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
&.sidebar-container {
|
||||
transition: background .2s ease-in-out;
|
||||
transition: background .15s ease-in-out;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
transition: transform .2s ease-in-out;
|
||||
transition: transform .15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ export default {
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
transform: translate(-100%, 0);
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<header class="header">
|
||||
<div class="header-nav">
|
||||
<div
|
||||
class="sidebar-toggle noselect"
|
||||
@click.stop="toggleSidebar"
|
||||
><Icon icon="menu" /></div>
|
||||
|
||||
<router-link
|
||||
to="/"
|
||||
class="logo-link"
|
||||
|
|
@ -46,20 +41,6 @@
|
|||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/movies"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Movies</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
|
|
@ -73,11 +54,30 @@
|
|||
>Tags</a>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<router-link
|
||||
v-slot="{ href, isActive, navigate }"
|
||||
to="/movies"
|
||||
>
|
||||
<a
|
||||
class="nav-link"
|
||||
:href="href"
|
||||
:class="{ active: isActive }"
|
||||
@click="navigate"
|
||||
>Movies</a>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="header-section">
|
||||
<div
|
||||
class="sidebar-toggle noselect"
|
||||
@click.stop="toggleSidebar"
|
||||
><Icon icon="menu" /></div>
|
||||
|
||||
<div class="header-toggles">
|
||||
<Icon
|
||||
v-show="!sfw"
|
||||
|
|
@ -209,6 +209,7 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
|
|
@ -244,7 +245,7 @@ export default {
|
|||
height: 100%;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin: 0 1rem 0 0;
|
||||
margin: -.25rem 1rem 0 0;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
|
|
@ -356,18 +357,29 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-small) {
|
||||
.sidebar-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
padding: 0 0 0 .5rem;
|
||||
.logo-link {
|
||||
margin: -.25rem .75rem 0 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
.search-compact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-toggles {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-micro) {
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-nano) {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,6 @@
|
|||
>
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-header">
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="sidebar-close noselect"
|
||||
@click.native="$emit('toggle', false)"
|
||||
/>
|
||||
|
||||
<router-link
|
||||
to="/updates"
|
||||
class="logo-link"
|
||||
|
|
@ -27,8 +21,16 @@
|
|||
/>
|
||||
</h1>
|
||||
</router-link>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="sidebar-close noselect"
|
||||
@click.native="$emit('toggle', false)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Search class="search-full" />
|
||||
|
||||
<nav class="nav">
|
||||
<ul class="nolist">
|
||||
<li class="nav-item">
|
||||
|
|
@ -141,6 +143,8 @@
|
|||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import Search from '../header/search.vue';
|
||||
|
||||
import logo from '../../img/logo.svg';
|
||||
|
||||
function sfw(state) {
|
||||
|
|
@ -160,6 +164,9 @@ function setSfw(enabled) {
|
|||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Search,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo,
|
||||
|
|
@ -184,7 +191,7 @@ export default {
|
|||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: var(--darken-weak);
|
||||
background: var(--darken);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -193,6 +200,7 @@ export default {
|
|||
justify-content: space-between;
|
||||
width: 15rem;
|
||||
height: 100%;
|
||||
margin: 0 0 0 auto;
|
||||
color: var(--text);
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
|
|
@ -201,7 +209,7 @@ export default {
|
|||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 3rem;
|
||||
height: 3rem;
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
$breakpoint-nano: 320px;
|
||||
$breakpoint-micro: 540px;
|
||||
$breakpoint-small: 620px;
|
||||
$breakpoint: 720px;
|
||||
$breakpoint-kilo: 900px;
|
||||
$breakpoint-mega: 1200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue