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-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);
}
}

View File

@ -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) {

View File

@ -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);

View File

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