1
0
mirror of https://github.com/thangisme/notes.git synced 2024-12-22 14:36:51 -05:00

Improved responsiveness of sidebar

This commit is contained in:
Silvio Giebl 2019-05-12 21:49:19 +02:00
parent 8c603aac1e
commit e9f016ac0f
3 changed files with 17 additions and 15 deletions

View File

@ -24,7 +24,7 @@
@include mq(md) { @include mq(md) {
flex-wrap: nowrap; flex-wrap: nowrap;
position: absolute; position: absolute;
width: $nav-width; width: $nav-width-md;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
border-right: $border $border-color; border-right: $border $border-color;
@ -54,7 +54,7 @@
@include mq(md) { @include mq(md) {
position: relative; position: relative;
max-width: $content-width; max-width: $content-width;
margin-left: $nav-width; margin-left: $nav-width-md;
} }
@include mq(lg) { @include mq(lg) {

View File

@ -61,18 +61,6 @@ $link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default; $btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default; $base-button-color: #f7f7f7 !default;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
sm: 500px,
md: 740px,
lg: 1120px,
xl: 1400px
) !default;
// //
// Spacing // Spacing
// //
@ -119,5 +107,18 @@ $border-color: $grey-lt-100 !default;
$gutter-spacing: $sp-6 !default; $gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default; $gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default; $nav-width: 264px !default;
$nav-width-md: 248px !default;
$content-width: 800px !default; $content-width: 800px !default;
$header-height: 60px !default; $header-height: 60px !default;
//
// Media queries in pixels
//
$media-queries: (
xs: 320px,
sm: 500px,
md: $content-width,
lg: $content-width + $nav-width,
xl: 1400px
) !default;

View File

@ -14,7 +14,8 @@ function toggleNav(){
const pageHeader = document.querySelector('.js-page-header'); const pageHeader = document.querySelector('.js-page-header');
const navTrigger = document.querySelector('.js-main-nav-trigger'); const navTrigger = document.querySelector('.js-main-nav-trigger');
addEvent(navTrigger, 'click', function(){ addEvent(navTrigger, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText; var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle'); var textToggle = navTrigger.getAttribute('data-text-toggle');