quarante-douze/qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add a mobile sidebar

Browse source 
Fixes #5
This commit is contained in:
Kazhnuz 2023-05-02 11:20:14 +02:00
parent bc91a13493
commit 8932bebc95
11 changed files with 165 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/mobile-sidebar.php Normal file
View file

@ -0,0 +1,38 @@
<nav id="mobile-sidebar" class="bg-dark fg-light sidebar menu hidden">
<h1 class="align-center text-light">Menu principal</h1>
<div class="mb-1">
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
</div>
<ul>
<h2>Pages principal</h2>
<li>
<a href="<?php echo site_url(); ?>" class="menu-item">
<span><i class="fa fa-home" aria-hidden="true"></i> Accueil</span>
</a>
</li>
<?php
$listmenu = get_nav_menu_locations();
$menu = wp_get_nav_menu_items($listmenu['top-navbar']);
foreach ($menu as $menuElement) {
echo '<li><a href="' . $menuElement->url . '" class="menu-item">'. $menuElement->title . '</a></li>';
}
?>
</ul>
<ul>
<h2>Liste des catégories</h2>
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {?>
<li>
<a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><?php echo $category->name ?></a>
</li>
<?php }
?>
</ul>
</nav>
<button id="mobile-button" class="menu-button"><i class="fa fa-navicon" aria-hidden="true"></i> <span class="sr-only">Afficher le menu</span></button>

2
components/navbar-pages.php
View file

@ -1,5 +1,5 @@
<div class="osd">
<div class="container menu toolbar fg-light d-block d-flex-sm">
<div class="container menu toolbar fg-light d-none d-flex-sm">
<nav>
<h2 class="sr-only">Menu des pages</h2>
<ul>

2
components/sidebar/categories.php
View file

@ -1,4 +1,4 @@
<section class="card head-secondary">
<section class="card head-secondary d-block-sm d-none">
<h2 class="card-header"><i class="fa fa-folder" aria-hidden="true"></i> Catégories</h2>
<div class="menu fg-dark">
<ul>

2
footer.php
View file

@ -1,9 +1,11 @@
</div>
</div>
<?php include(TEMPLATEPATH . '/components/mobile-sidebar.php'); ?>
<?php include(TEMPLATEPATH . '/components/footer-content.php'); ?>
<?php wp_footer(); ?>
<script src="<?php echo get_template_directory_uri();?>/js/trim.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/prettylinks.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/mobile-sidebar.js"></script>
</body>
</html>

19
home.php
View file

@ -30,24 +30,5 @@
}
?>
<nav class="container menu bg-light fg-dark categories d-block d-none-sm">
<h1 class="sr-only">Menu des catégories</h1>
<ul class="f-around">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {?>
<li>
<a class="menu-item" href="<?php echo get_category_link($category->term_id) ?>"><span><i class="fa fa-fw fa-folder"></i> <?php echo $category->name ?></span></a>
</li>
<?php }
?>
</ul>
</nav>
</main>
<?php get_footer(); ?>

10
js/mobile-sidebar.js Normal file
View file

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

3
scss/_global.scss
View file

@ -5,4 +5,5 @@
@import 'custom/global';
@import 'custom/previews';
@import 'custom/featured';
@import 'custom/article';
@import 'custom/article';
@import 'custom/mobile';

8
scss/components/_menus.scss
View file

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

41
scss/custom/_mobile.scss Normal file
View file

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

8
scss/utils/_display.scss
View file

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

78
style.css
View file

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