From 8ec9aa548da29b194dfb9aaef523a05c704ed618 Mon Sep 17 00:00:00 2001 From: Antoine Date: Mon, 13 Feb 2023 11:23:33 +0100 Subject: [PATCH] handling of the mobile menu --- css/app.css | 211 +++++++++++----------------- css/editor-style.css | 136 ------------------ functions.php | 70 ++++----- header.php | 108 +++++++------- js/app.js | 20 ++- resources/css/components/header.css | 69 +++++++++ resources/img/close_menu_icon.svg | 6 + resources/js/app.js | 10 +- resources/js/header.js | 18 +++ style.css | 2 +- 10 files changed, 292 insertions(+), 358 deletions(-) create mode 100644 resources/img/close_menu_icon.svg create mode 100644 resources/js/header.js diff --git a/css/app.css b/css/app.css index 624aae9..72cfe44 100644 --- a/css/app.css +++ b/css/app.css @@ -616,16 +616,6 @@ video { margin-right: auto; } -.my-12 { - margin-top: 3rem; - margin-bottom: 3rem; -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem; -} - .mb-8 { margin-bottom: 2rem; } @@ -634,10 +624,6 @@ video { margin-top: 1rem; } -.mb-10 { - margin-bottom: 2.5rem; -} - .mb-4 { margin-bottom: 1rem; } @@ -690,14 +676,6 @@ video { max-width: 24rem; } -.max-w-screen-lg { - max-width: 960px; -} - -.flex-none { - flex: none; -} - .flex-grow { flex-grow: 1; } @@ -734,14 +712,6 @@ video { border-radius: 0.25rem; } -.rounded-xl { - border-radius: 0.75rem; -} - -.border { - border-width: 1px; -} - .border-b { border-bottom-width: 1px; } @@ -751,10 +721,6 @@ video { border-color: rgb(14 165 233 / var(--tw-border-opacity)); } -.border-transparent { - border-color: transparent; -} - .bg-primary { --tw-bg-opacity: 1; background-color: rgb(14 165 233 / var(--tw-bg-opacity)); @@ -775,16 +741,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - .p-4 { padding: 1rem; } @@ -814,20 +770,6 @@ video { padding-bottom: 1.5rem; } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.pb-12 { - padding-bottom: 3rem; -} - .text-center { text-align: center; } @@ -852,11 +794,6 @@ video { line-height: 1.25rem; } -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - .font-light { font-weight: 300; } @@ -869,30 +806,14 @@ video { font-weight: 800; } -.font-medium { - font-weight: 500; -} - -.font-semibold { - font-weight: 600; -} - .uppercase { text-transform: uppercase; } -.leading-6 { - line-height: 1.5rem; -} - .leading-tight { line-height: 1.25; } -.tracking-tight { - letter-spacing: -0.025em; -} - .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); @@ -918,16 +839,6 @@ video { color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-secondary { - --tw-text-opacity: 1; - color: rgb(20 184 166 / var(--tw-text-opacity)); -} - -.text-primary { - --tw-text-opacity: 1; - color: rgb(14 165 233 / var(--tw-text-opacity)); -} - .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); @@ -948,18 +859,6 @@ video { -moz-osx-font-smoothing: grayscale; } -.transition-colors { - transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.duration-200 { - transition-duration: 200ms; -} - .alignfull { margin: 2rem calc(50% - 50vw) !important; max-width: 100vw !important; @@ -1071,36 +970,101 @@ article>*:not(.entry-content), list-style-type: decimal; } -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; +/* ########### GENERAL ############ */ + +/* ########### COMPONENTS ############ */ + +.primary-menu-container { + margin-left: auto; + margin-right: auto; + max-width: 1280px; + padding-left: 2rem; + padding-right: 2rem; } -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +.close_btn { + display: none; } -.focus\:ring-gray-900:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)); +.menu-navlink { + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + text-transform: uppercase; } -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px; -} +@media (max-width: 960px) { + #primary-menu { + position: absolute; + left: 0px; + margin-top: 0px; + --tw-bg-opacity: 1; + background-color: rgb(14 165 233 / var(--tw-bg-opacity)); + transition: all 0.3s ease-in-out; + transform: translateY(-110vh); + z-index: 800; + height: -webkit-fit-content; + height: -moz-fit-content; + height: fit-content; + top: 0; + width: 100vw; + min-height: 100vh; + } -.focus\:ring-offset-white:focus { - --tw-ring-offset-color: #fff; -} + #primary-menu > ul { + margin-left: auto; + margin-right: auto; + max-width: 20rem; + min-height: 96vh; + padding-top: 5vh; + } -@media (min-width: 600px) { - .sm\:w-auto { - width: auto; + #primary-menu li.menu-item { + margin-top: 0px; + padding-top: 2rem; + padding-bottom: 2rem; + text-align: center; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 500; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + display: block !important; + padding-bottom: 0; + } + + /* BURGER MENU */ + + #primary-menu body:has(header.burger_menu_active) { + overflow: hidden; + } + + #primary-menu header.burger_menu_active { + position: fixed; + top: 0px; + height: 100vh; + overflow: scroll; + padding: 0; + } + + .burger_menu_active .close_btn { + z-index: 999; + width: 20px; + right: 20px; + top: 20px; + display: block; + position: fixed; + } + + .burger_menu_active #primary-menu { + transform: translateY(0); } } +/* ########### BLOCKS ############ */ + +/* Home */ + @media (min-width: 782px) { .md\:my-6 { margin-top: 1.5rem; @@ -1164,13 +1128,8 @@ article>*:not(.entry-content), padding: 0px; } - .lg\:text-7xl { - font-size: 4.5rem; - line-height: 1; - } - .lg\:text-5xl { font-size: 3rem; line-height: 1; } -} \ No newline at end of file +} diff --git a/css/editor-style.css b/css/editor-style.css index a07113f..b56c859 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -63,16 +63,6 @@ margin-right: auto } -.my-12 { - margin-top: 3rem; - margin-bottom: 3rem -} - -.my-4 { - margin-top: 1rem; - margin-bottom: 1rem -} - .mb-8 { margin-bottom: 2rem } @@ -81,10 +71,6 @@ margin-top: 1rem } -.mb-10 { - margin-bottom: 2.5rem -} - .mb-4 { margin-bottom: 1rem } @@ -137,14 +123,6 @@ max-width: 24rem } -.max-w-screen-lg { - max-width: 960px -} - -.flex-none { - flex: none -} - .flex-grow { flex-grow: 1 } @@ -181,14 +159,6 @@ border-radius: 0.25rem } -.rounded-xl { - border-radius: 0.75rem -} - -.border { - border-width: 1px -} - .border-b { border-bottom-width: 1px } @@ -198,10 +168,6 @@ border-color: rgb(14 165 233 / var(--tw-border-opacity)) } -.border-transparent { - border-color: transparent -} - .bg-primary { --tw-bg-opacity: 1; background-color: rgb(14 165 233 / var(--tw-bg-opacity)) @@ -222,16 +188,6 @@ background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } -.bg-gray-100 { - --tw-bg-opacity: 1; - background-color: rgb(243 244 246 / var(--tw-bg-opacity)) -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)) -} - .p-4 { padding: 1rem } @@ -261,20 +217,6 @@ padding-bottom: 1.5rem } -.py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem -} - -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem -} - -.pb-12 { - padding-bottom: 3rem -} - .text-center { text-align: center } @@ -299,11 +241,6 @@ line-height: 1.25rem } -.text-3xl { - font-size: 1.875rem; - line-height: 2.25rem -} - .font-light { font-weight: 300 } @@ -316,30 +253,14 @@ font-weight: 800 } -.font-medium { - font-weight: 500 -} - -.font-semibold { - font-weight: 600 -} - .uppercase { text-transform: uppercase } -.leading-6 { - line-height: 1.5rem -} - .leading-tight { line-height: 1.25 } -.tracking-tight { - letter-spacing: -0.025em -} - .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)) @@ -365,16 +286,6 @@ color: rgb(75 85 99 / var(--tw-text-opacity)) } -.text-secondary { - --tw-text-opacity: 1; - color: rgb(20 184 166 / var(--tw-text-opacity)) -} - -.text-primary { - --tw-text-opacity: 1; - color: rgb(14 165 233 / var(--tw-text-opacity)) -} - .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)) @@ -395,18 +306,6 @@ -moz-osx-font-smoothing: grayscale } -.transition-colors { - transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms -} - -.duration-200 { - transition-duration: 200ms -} - .alignfull { margin: 2rem calc(50% - 50vw) !important; max-width: 100vw !important; @@ -482,36 +381,6 @@ body { max-width: 100% } -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px -} - -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) -} - -.focus\:ring-gray-900:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)) -} - -.focus\:ring-offset-2:focus { - --tw-ring-offset-width: 2px -} - -.focus\:ring-offset-white:focus { - --tw-ring-offset-color: #fff -} - -@media (min-width: 600px) { - .sm\:w-auto { - width: auto - } -} - @media (min-width: 782px) { .md\:my-6 { margin-top: 1.5rem; @@ -575,11 +444,6 @@ body { padding: 0px } - .lg\:text-7xl { - font-size: 4.5rem; - line-height: 1 - } - .lg\:text-5xl { font-size: 3rem; line-height: 1 diff --git a/functions.php b/functions.php index 7206e67..f8b68b6 100644 --- a/functions.php +++ b/functions.php @@ -3,19 +3,20 @@ /** * Theme setup. */ -function tailpress_setup() { +function tailpress_setup() +{ -// ##### Setup 🡒 Navigation + // ##### Setup 🡒 Navigation register_nav_menus( array( - 'primary' => __( 'Primary Menu', 'tailpress' ), + 'primary' => __('Primary Menu', 'tailpress'), ) ); -// ##### Setup 🡒 Ajout des themes supports + // ##### Setup 🡒 Ajout des themes supports - add_theme_support( + add_theme_support( 'html5', array( 'search-form', @@ -25,41 +26,43 @@ function tailpress_setup() { 'caption', ) ); - add_theme_support( 'title-tag' ); - add_theme_support( 'custom-logo' ); - add_theme_support( 'post-thumbnails' ); + add_theme_support('title-tag'); + add_theme_support('custom-logo'); + add_theme_support('post-thumbnails'); - add_theme_support( 'align-wide' ); - add_theme_support( 'wp-block-styles' ); + add_theme_support('align-wide'); + add_theme_support('wp-block-styles'); - add_theme_support( 'editor-styles' ); - add_editor_style( 'css/editor-style.css' ); + add_theme_support('editor-styles'); + add_editor_style('css/editor-style.css'); // add_post_type_support( 'page', 'excerpt' ); } -add_action( 'after_setup_theme', 'tailpress_setup' ); +add_action('after_setup_theme', 'tailpress_setup'); // ##### Enqueue Theme assets 🡒 Front -function tailpress_enqueue_scripts() { +function tailpress_enqueue_scripts() +{ $theme = wp_get_theme(); - wp_enqueue_style( 'tailpress', tailpress_asset( 'css/app.css' ), array(), $theme->get( 'Version' ) ); - wp_enqueue_script( 'tailpress', tailpress_asset( 'js/app.js' ), array(), $theme->get( 'Version' ) ); + wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version')); + wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version')); } // ##### Enqueue Theme assets 🡒 Back -function enqueue_gutenberg_back_styles() { +function enqueue_gutenberg_back_styles() +{ // wp_enqueue_style( 'tailpress_back', tailpress_asset( 'css/app.css' ), array() ); } -add_action( 'enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles' ); +add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles'); -add_action( 'wp_enqueue_scripts', 'tailpress_enqueue_scripts' ); +add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts'); /** * Get asset path. @@ -68,12 +71,13 @@ add_action( 'wp_enqueue_scripts', 'tailpress_enqueue_scripts' ); * * @return string */ -function tailpress_asset( $path ) { - if ( wp_get_environment_type() === 'production' ) { +function tailpress_asset($path) +{ + if (wp_get_environment_type() === 'production') { return get_stylesheet_directory_uri() . '/' . $path; } - return add_query_arg( 'time', time(), get_stylesheet_directory_uri() . '/' . $path ); + return add_query_arg('time', time(), get_stylesheet_directory_uri() . '/' . $path); } /** @@ -85,19 +89,20 @@ function tailpress_asset( $path ) { * * @return array */ -function tailpress_nav_menu_add_li_class( $classes, $item, $args, $depth ) { - if ( isset( $args->li_class ) ) { +function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth) +{ + if (isset($args->li_class)) { $classes[] = $args->li_class; } - if ( isset( $args->{"li_class_$depth"} ) ) { + if (isset($args->{"li_class_$depth"})) { $classes[] = $args->{"li_class_$depth"}; } return $classes; } -add_filter( 'nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4 ); +add_filter('nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4); /** * Adds option 'submenu_class' to 'wp_nav_menu'. @@ -108,23 +113,24 @@ add_filter( 'nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4 ); * * @return array */ -function tailpress_nav_menu_add_submenu_class( $classes, $args, $depth ) { - if ( isset( $args->submenu_class ) ) { +function tailpress_nav_menu_add_submenu_class($classes, $args, $depth) +{ + if (isset($args->submenu_class)) { $classes[] = $args->submenu_class; } - if ( isset( $args->{"submenu_class_$depth"} ) ) { + if (isset($args->{"submenu_class_$depth"})) { $classes[] = $args->{"submenu_class_$depth"}; } return $classes; } -add_filter( 'nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3 ); +add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3); -require_once( __DIR__ . '/includes/blocks.php'); -require_once( __DIR__ . '/includes/post_types.php'); +require_once(__DIR__ . '/includes/blocks.php'); +require_once(__DIR__ . '/includes/post_types.php'); // require_once( __DIR__ . '/includes/taxonomy.php'); // require_once( __DIR__ . '/includes/errorlog.php'); // require_once( __DIR__ . '/includes/logos.php'); \ No newline at end of file diff --git a/header.php b/header.php index 0b9919e..89abe37 100644 --- a/header.php +++ b/header.php @@ -1,79 +1,79 @@ > + - + - + -> +> - + -
+
- + -
+
-
-
-
-
- - - - - - +
+
+
+
+ + + + + + -

- -

+

+ +

- -
+ +
-
- - - - - +
+ + + + + + - - - + + +
+ + 'primary-menu', + 'container_class' => 'bg-primary mt-4 p-4 lg:mt-0 lg:p-0 lg:bg-transparent lg:block', + 'menu_class' => 'lg:flex lg:-mx-4', + 'theme_location' => 'primary', + 'li_class' => 'lg:mx-4 menu-navlink', + 'fallback_cb' => false, + ) + ); + ?> +
- - 'primary-menu', - 'container_class' => 'hidden bg-gray-100 mt-4 p-4 lg:mt-0 lg:p-0 lg:bg-transparent lg:block', - 'menu_class' => 'lg:flex lg:-mx-4', - 'theme_location' => 'primary', - 'li_class' => 'lg:mx-4', - 'fallback_cb' => false, - ) - ); - ?>
-
-
+
-
+
- - - + - + -
+ + +
\ No newline at end of file diff --git a/js/app.js b/js/app.js index 6505f93..20cf191 100644 --- a/js/app.js +++ b/js/app.js @@ -1,10 +1,24 @@ (() => { - // resources/js/app.js - window.addEventListener("load", function() { + // resources/js/header.js + function menuInit() { let main_navigation = document.querySelector("#primary-menu"); + const header = document.querySelector("#primary-header"); + const close = header.querySelector(".close_btn"); + console.log(close); document.querySelector("#primary-menu-toggle").addEventListener("click", function(e) { e.preventDefault(); - main_navigation.classList.toggle("hidden"); + header.classList.toggle("burger_menu_active"); }); + close.addEventListener("click", function(e) { + e.preventDefault(); + header.classList.toggle("burger_menu_active"); + }); + } + + // resources/js/app.js + console.log("menuInit"); + console.log("menuIniteeeee"); + window.addEventListener("load", function() { + menuInit(); }); })(); diff --git a/resources/css/components/header.css b/resources/css/components/header.css index e69de29..6c0e905 100644 --- a/resources/css/components/header.css +++ b/resources/css/components/header.css @@ -0,0 +1,69 @@ +.primary-menu-container { + @apply mx-auto max-w-screen-xl px-8; +} +.close_btn { + display: none; +} +.menu-navlink { + @apply font-medium + text-sm + uppercase; +} + +@media (max-width: 960px) { + #primary-menu { + @apply bg-primary + mt-0 + left-0 + absolute; + transition: all 0.3s ease-in-out; + transform: translateY(-110vh); + z-index: 800; + height: fit-content; + top: 0; + width: 100vw; + min-height: 100vh; + + > ul { + @apply max-w-xs + mx-auto; + min-height: 96vh; + padding-top: 5vh; + } + li.menu-item { + @apply mt-0 + text-center + text-white + font-medium + py-8 + text-lg; + display: block !important; + padding-bottom: 0; + } + /* BURGER MENU */ + body:has(header.burger_menu_active) { + overflow: hidden; + } + + header.burger_menu_active { + position: fixed; + top: 0px; + height: 100vh; + overflow: scroll; + padding: 0; + } + } + .burger_menu_active { + .close_btn { + z-index: 999; + width: 20px; + right: 20px; + top: 20px; + display: block; + position: fixed; + } + #primary-menu { + transform: translateY(0); + } + } +} diff --git a/resources/img/close_menu_icon.svg b/resources/img/close_menu_icon.svg new file mode 100644 index 0000000..16934e5 --- /dev/null +++ b/resources/img/close_menu_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/js/app.js b/resources/js/app.js index 3b58bd1..1839e1d 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,8 +1,6 @@ -// Navigation toggle +import menuInit from './header'; +console.log('menuInit'); +console.log('menuIniteeeee'); window.addEventListener('load', function () { - let main_navigation = document.querySelector('#primary-menu'); - document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { - e.preventDefault(); - main_navigation.classList.toggle('hidden'); - }); + menuInit(); }); \ No newline at end of file diff --git a/resources/js/header.js b/resources/js/header.js new file mode 100644 index 0000000..f430848 --- /dev/null +++ b/resources/js/header.js @@ -0,0 +1,18 @@ +export default function menuInit() { + let main_navigation = document.querySelector('#primary-menu'); + const header = document.querySelector('#primary-header'); + const close = header.querySelector('.close_btn'); + console.log(close) + + document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) { + e.preventDefault(); + // main_navigation.classList.toggle('hidden'); + header.classList.toggle('burger_menu_active'); + }); + + close.addEventListener('click', function (e) { + e.preventDefault(); + // main_navigation.classList.toggle('hidden'); + header.classList.toggle('burger_menu_active'); + }); +} \ No newline at end of file diff --git a/style.css b/style.css index bdbd8c1..102b10a 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ /* -Theme Name: Deligraph_melanieRutten +Theme Name: Deligraph_starter Author: Deligraph Author URI: https://deligraph.com/ Version: 1.0.0