handling of the mobile menu
This commit is contained in:
parent
21b289cbcd
commit
8ec9aa548d
209
css/app.css
209
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,11 +1128,6 @@ 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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
106
header.php
106
header.php
|
|
@ -1,79 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?>>
|
||||
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||||
<meta charset="<?php bloginfo('charset'); ?>">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="profile" href="http://gmpg.org/xfn/11">
|
||||
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
|
||||
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
|
||||
|
||||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class( 'bg-white text-gray-900 antialiased' ); ?>>
|
||||
<body <?php body_class('bg-white text-gray-900 antialiased'); ?>>
|
||||
|
||||
<?php do_action( 'tailpress_site_before' ); ?>
|
||||
<?php do_action('tailpress_site_before'); ?>
|
||||
|
||||
<div id="page" class="min-h-screen flex flex-col">
|
||||
<div id="page" class="min-h-screen flex flex-col">
|
||||
|
||||
<?php do_action( 'tailpress_header' ); ?>
|
||||
<?php do_action('tailpress_header'); ?>
|
||||
|
||||
<header>
|
||||
<header id="primary-header">
|
||||
|
||||
<div class="mx-auto container">
|
||||
<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<?php if ( has_custom_logo() ) { ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php } else { ?>
|
||||
<a href="<?php echo get_bloginfo( 'url' ); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo( 'name' ); ?>
|
||||
</a>
|
||||
<div class="primary-menu-container">
|
||||
<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php } else { ?>
|
||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo( 'description' ); ?>
|
||||
</p>
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo('description'); ?>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden">
|
||||
<a href="#" aria-label="Toggle navigation" id="primary-menu-toggle">
|
||||
<svg viewBox="0 0 20 20" class="inline-block w-6 h-6" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||
<g id="icon-shape">
|
||||
<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z"
|
||||
id="Combined-Shape"></path>
|
||||
<div class="lg:hidden">
|
||||
<a href="#" aria-label="Toggle navigation" id="primary-menu-toggle">
|
||||
<svg viewBox="0 0 20 20" class="inline-block w-6 h-6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
|
||||
<g id="icon-shape">
|
||||
<path d="M0,3 L20,3 L20,5 L0,5 L0,3 Z M0,9 L20,9 L20,11 L0,11 L0,9 Z M0,15 L20,15 L20,17 L0,17 L0,15 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'container_id' => '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,
|
||||
)
|
||||
);
|
||||
?>
|
||||
<img class="close_btn" src="<?php echo get_template_directory_uri() . '/resources/img/close_menu_icon.svg' ?>" />
|
||||
</div>
|
||||
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'container_id' => '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,
|
||||
)
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<div id="content" class="site-content flex-grow">
|
||||
<div id="content" class="site-content flex-grow">
|
||||
|
||||
<?php if ( is_front_page() ) { ?>
|
||||
<?php if (is_front_page()) { ?>
|
||||
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
|
||||
<?php do_action( 'tailpress_content_start' ); ?>
|
||||
<?php do_action('tailpress_content_start'); ?>
|
||||
|
||||
<main>
|
||||
<main>
|
||||
20
js/app.js
20
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();
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
6
resources/img/close_menu_icon.svg
Normal file
6
resources/img/close_menu_icon.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="329.871" height="329.87" viewBox="0 0 329.871 329.87">
|
||||
<g id="Groupe_784" data-name="Groupe 784" transform="translate(19045.936 1289.935)">
|
||||
<line id="Ligne_43" data-name="Ligne 43" y1="303" x2="303" transform="translate(-19032.5 -1276.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="19"/>
|
||||
<line id="Ligne_44" data-name="Ligne 44" x1="303" y1="303" transform="translate(-19032.5 -1276.5)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="19"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 547 B |
|
|
@ -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();
|
||||
});
|
||||
18
resources/js/header.js
Normal file
18
resources/js/header.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user