From 8932bebc952e50fa7abc9710a45824027c609418 Mon Sep 17 00:00:00 2001 From: Kazhnuz Date: Tue, 2 May 2023 11:20:14 +0200 Subject: [PATCH] feat: add a mobile sidebar Fixes #5 --- components/mobile-sidebar.php | 38 +++++++++++++++ components/navbar-pages.php | 2 +- components/sidebar/categories.php | 2 +- footer.php | 2 + home.php | 19 -------- js/mobile-sidebar.js | 10 ++++ scss/_global.scss | 3 +- scss/components/_menus.scss | 8 +++- scss/custom/_mobile.scss | 41 ++++++++++++++++ scss/utils/_display.scss | 8 ++-- style.css | 78 +++++++++++++++++++++++-------- 11 files changed, 165 insertions(+), 46 deletions(-) create mode 100644 components/mobile-sidebar.php create mode 100644 js/mobile-sidebar.js create mode 100644 scss/custom/_mobile.scss diff --git a/components/mobile-sidebar.php b/components/mobile-sidebar.php new file mode 100644 index 0000000..1ba316e --- /dev/null +++ b/components/mobile-sidebar.php @@ -0,0 +1,38 @@ + + + \ No newline at end of file diff --git a/components/navbar-pages.php b/components/navbar-pages.php index 7a6efd6..db51ce1 100644 --- a/components/navbar-pages.php +++ b/components/navbar-pages.php @@ -1,5 +1,5 @@
-
+
+ + diff --git a/home.php b/home.php index 61c145f..26694fe 100644 --- a/home.php +++ b/home.php @@ -30,24 +30,5 @@ } ?> - - - diff --git a/js/mobile-sidebar.js b/js/mobile-sidebar.js new file mode 100644 index 0000000..af794f0 --- /dev/null +++ b/js/mobile-sidebar.js @@ -0,0 +1,10 @@ +document.getElementById('mobile-button').addEventListener('click', function () { + const sidebar = document.getElementById('mobile-sidebar'); + if (sidebar.classList.contains('hidden')) { + sidebar.classList.remove('hidden'); + sidebar.classList.add('shown'); + } else { + sidebar.classList.remove('shown'); + sidebar.classList.add('hidden'); + } +}); \ No newline at end of file diff --git a/scss/_global.scss b/scss/_global.scss index 5fa7d8f..ce1e818 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -5,4 +5,5 @@ @import 'custom/global'; @import 'custom/previews'; @import 'custom/featured'; -@import 'custom/article'; \ No newline at end of file +@import 'custom/article'; +@import 'custom/mobile'; \ No newline at end of file diff --git a/scss/components/_menus.scss b/scss/components/_menus.scss index 6771703..b6a6d6a 100644 --- a/scss/components/_menus.scss +++ b/scss/components/_menus.scss @@ -96,12 +96,18 @@ } } -.menu-divider { +.menu-divider, +.menu ul h1, +ul.menu h1, +.menu h2, +ul.menu h2 { position: relative; left: -$lineheight_quarter; font-weight: $fontweight_hyper; padding-top: $lineheight_quarter; padding-bottom: $lineheight_quarter; + font-size:1em; + line-height:$lineheight; } .menu-label { diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss new file mode 100644 index 0000000..552d046 --- /dev/null +++ b/scss/custom/_mobile.scss @@ -0,0 +1,41 @@ +#mobile-sidebar { + position: fixed; + top:0; + left:-100vw; + width:100vw; + height:100vh; + transition: left 0.2s; + padding: 1rem; + &.shown { + left:0; + } + + @include sm() { + display:none; + } +} + +.menu-button { + position:fixed; + bottom: 24px; + right: 24px; + background-color:rgba(0,0,0,0.2); + color:$color-font-light; + padding:0.75em; + border:none; + font-size:1.2rem; + display:flex; + align-content: center; + justify-content: center; + aspect-ratio: 1; + border-radius:999px; + opacity: 0.75; + + &:hover { + opacity:1; + } + + @include sm() { + display: none; + } +} \ No newline at end of file diff --git a/scss/utils/_display.scss b/scss/utils/_display.scss index 8b31a5f..90b521d 100644 --- a/scss/utils/_display.scss +++ b/scss/utils/_display.scss @@ -1,12 +1,12 @@ -.d-block { +.d-none { @include responsive() { - display: block!important; + display: none !important; } } -.d-none { +.d-block { @include responsive() { - display: none!important; + display: block!important; } } diff --git a/style.css b/style.css index 52c404f..ae733fa 100644 --- a/style.css +++ b/style.css @@ -1450,12 +1450,18 @@ ul.card-list, .card > ul { padding-left: 0.8rem; padding-right: 0.8rem; } -.menu-divider { +.menu-divider, +.menu ul h1, +ul.menu h1, +.menu h2, +ul.menu h2 { position: relative; left: -0.4rem; font-weight: 800; padding-top: 0.4rem; - padding-bottom: 0.4rem; } + padding-bottom: 0.4rem; + font-size: 1em; + line-height: 1.6rem; } .menu-label { border: 0px solid rgba(0, 0, 0, 0.3); @@ -2495,23 +2501,6 @@ textarea { .f-between { justify-content: space-between; } -.d-block { - display: block !important; } - @media (min-width: 576px) { - .d-block-sm { - display: block !important; } } - @media (min-width: 768px) { - .d-block-md { - display: block !important; } } - @media (min-width: 992px) { - .d-block-lg { - display: block !important; } } - @media (min-width: 1200px) { - .d-block-xl { - display: block !important; } } - @media (min-width: 1600px) { - .d-block-xxl { - display: block !important; } } .d-none { display: none !important; } @media (min-width: 576px) { @@ -2529,6 +2518,23 @@ textarea { @media (min-width: 1600px) { .d-none-xxl { display: none !important; } } +.d-block { + display: block !important; } + @media (min-width: 576px) { + .d-block-sm { + display: block !important; } } + @media (min-width: 768px) { + .d-block-md { + display: block !important; } } + @media (min-width: 992px) { + .d-block-lg { + display: block !important; } } + @media (min-width: 1200px) { + .d-block-xl { + display: block !important; } } + @media (min-width: 1600px) { + .d-block-xxl { + display: block !important; } } .d-flex { display: flex !important; } @media (min-width: 576px) { @@ -2868,3 +2874,37 @@ footer { .article-meta .article-category .badge { display: inline-block; margin-bottom: 0.4rem; } + +#mobile-sidebar { + position: fixed; + top: 0; + left: -100vw; + width: 100vw; + height: 100vh; + transition: left 0.2s; + padding: 1rem; } + #mobile-sidebar.shown { + left: 0; } + @media (min-width: 576px) { + #mobile-sidebar { + display: none; } } +.menu-button { + position: fixed; + bottom: 24px; + right: 24px; + background-color: rgba(0, 0, 0, 0.2); + color: #fefefe; + padding: 0.75em; + border: none; + font-size: 1.2rem; + display: flex; + align-content: center; + justify-content: center; + aspect-ratio: 1; + border-radius: 999px; + opacity: 0.75; } + .menu-button:hover { + opacity: 1; } + @media (min-width: 576px) { + .menu-button { + display: none; } }