Showing overflowing menu items in header on mobile. Added search to sidebar (WIP). Added breakpoint.

This commit is contained in:
DebaucheryLibrarian 2020-09-11 03:13:51 +02:00
parent 0e3145a051
commit 08db1d63bf
4 changed files with 59 additions and 38 deletions

View File

@ -96,11 +96,11 @@ export default {
.slide-enter-active, .slide-enter-active,
.slide-leave-active { .slide-leave-active {
&.sidebar-container { &.sidebar-container {
transition: background .2s ease-in-out; transition: background .15s ease-in-out;
} }
.sidebar { .sidebar {
transition: transform .2s ease-in-out; transition: transform .15s ease-in-out;
} }
} }
@ -111,7 +111,7 @@ export default {
} }
.sidebar { .sidebar {
transform: translate(-100%, 0); transform: translate(100%, 0);
} }
} }

View File

@ -1,11 +1,6 @@
<template> <template>
<header class="header"> <header class="header">
<div class="header-nav"> <div class="header-nav">
<div
class="sidebar-toggle noselect"
@click.stop="toggleSidebar"
><Icon icon="menu" /></div>
<router-link <router-link
to="/" to="/"
class="logo-link" class="logo-link"
@ -46,20 +41,6 @@
</router-link> </router-link>
</li> </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"> <li class="nav-item">
<router-link <router-link
v-slot="{ href, isActive, navigate }" v-slot="{ href, isActive, navigate }"
@ -73,11 +54,30 @@
>Tags</a> >Tags</a>
</router-link> </router-link>
</li> </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> </ul>
</nav> </nav>
</div> </div>
<div class="header-section"> <div class="header-section">
<div
class="sidebar-toggle noselect"
@click.stop="toggleSidebar"
><Icon icon="menu" /></div>
<div class="header-toggles"> <div class="header-toggles">
<Icon <Icon
v-show="!sfw" v-show="!sfw"
@ -209,6 +209,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
overflow: hidden;
} }
.header-section { .header-section {
@ -244,7 +245,7 @@ export default {
height: 100%; height: 100%;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
margin: 0 1rem 0 0; margin: -.25rem 1rem 0 0;
} }
.header-logo { .header-logo {
@ -356,18 +357,29 @@ export default {
} }
} }
@media(max-width: $breakpoint) { @media(max-width: $breakpoint-small) {
.nav {
display: none;
}
.sidebar-toggle { .sidebar-toggle {
display: flex; display: flex;
} }
.header-logo { .logo-link {
padding: 0 0 0 .5rem; 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) { @media(max-width: $breakpoint-nano) {

View File

@ -9,12 +9,6 @@
> >
<div class="sidebar-section"> <div class="sidebar-section">
<div class="sidebar-header"> <div class="sidebar-header">
<Icon
icon="cross2"
class="sidebar-close noselect"
@click.native="$emit('toggle', false)"
/>
<router-link <router-link
to="/updates" to="/updates"
class="logo-link" class="logo-link"
@ -27,8 +21,16 @@
/> />
</h1> </h1>
</router-link> </router-link>
<Icon
icon="cross2"
class="sidebar-close noselect"
@click.native="$emit('toggle', false)"
/>
</div> </div>
<Search class="search-full" />
<nav class="nav"> <nav class="nav">
<ul class="nolist"> <ul class="nolist">
<li class="nav-item"> <li class="nav-item">
@ -141,6 +143,8 @@
<script> <script>
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import Search from '../header/search.vue';
import logo from '../../img/logo.svg'; import logo from '../../img/logo.svg';
function sfw(state) { function sfw(state) {
@ -160,6 +164,9 @@ function setSfw(enabled) {
} }
export default { export default {
components: {
Search,
},
data() { data() {
return { return {
logo, logo,
@ -184,7 +191,7 @@ export default {
width: 100%; width: 100%;
position: absolute; position: absolute;
z-index: 10; z-index: 10;
background: var(--darken-weak); background: var(--darken);
} }
.sidebar { .sidebar {
@ -193,6 +200,7 @@ export default {
justify-content: space-between; justify-content: space-between;
width: 15rem; width: 15rem;
height: 100%; height: 100%;
margin: 0 0 0 auto;
color: var(--text); color: var(--text);
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);

View File

@ -1,5 +1,6 @@
$breakpoint-nano: 320px; $breakpoint-nano: 320px;
$breakpoint-micro: 540px; $breakpoint-micro: 540px;
$breakpoint-small: 620px;
$breakpoint: 720px; $breakpoint: 720px;
$breakpoint-kilo: 900px; $breakpoint-kilo: 900px;
$breakpoint-mega: 1200px; $breakpoint-mega: 1200px;