Keith Solomon
123 lines
5.7 KiB
PHP
123 lines
5.7 KiB
PHP
<?php
|
|
/**
|
|
* Theme header template
|
|
*
|
|
* @package GoAskAuntie
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
namespace BasicWP;
|
|
|
|
$logo_url = get_theme_file_uri( '/static/img/logo.png' );
|
|
$social_twitter = getFieldValue( 'social_media.twitter' ) ?: 'https://twitter.com/goaskauntieca';
|
|
$social_facebook = getFieldValue( 'social_media.facebook' ) ?: 'https://www.facebook.com/Goaskauntieca';
|
|
$social_instagram = getFieldValue( 'social_media.instagram' ) ?: 'https://www.instagram.com/goaskauntieca/';
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html <?php language_attributes(); ?>>
|
|
|
|
<head>
|
|
<title><?php wp_title( '' ); ?></title>
|
|
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<?php wp_head(); ?>
|
|
</head>
|
|
|
|
<body <?php echo body_class(); ?> class="bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top">
|
|
<a class="skip-link" href="#maincontent">
|
|
<?php echo esc_html__( 'Skip to main content' ); ?>
|
|
</a>
|
|
|
|
<header role="banner" class="z-50 bg-white fixed top-0 w-full h-auto">
|
|
<!-- Desktop Navigation -->
|
|
<nav class="bg-white px-12 w-full md:flex justify-between items-baseline fixed z-top shadow-xl hidden h-20" aria-label="Main">
|
|
<div class="mr-auto ml-0 w-auto items-start justify-evenly flex">
|
|
<div class="flex-initial">
|
|
<a class="" href="<?php echo esc_url( home_url( '/' ) ); ?>">
|
|
<img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php bloginfo( 'name' ); ?> logo" class="h-16 py-2">
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<?php
|
|
if ( has_nav_menu( 'main_navigation' ) ) {
|
|
$locations = get_nav_menu_locations();
|
|
$menu = wp_get_nav_menu_items( (int) $locations['main_navigation'] );
|
|
if ( $menu ) {
|
|
$top_items = array_filter( $menu, function( $item ) { return $item->menu_item_parent == 0; } );
|
|
$index = 0;
|
|
foreach ( $top_items as $item ) {
|
|
if ( $index > 0 ) {
|
|
$heart_color = 'text-teal';
|
|
$title_lower = strtolower( $item->title );
|
|
if ( strpos( $title_lower, 'q' ) !== false && strpos( $title_lower, 'a' ) !== false ) {
|
|
$heart_color = '!text-red';
|
|
} elseif ( strpos( $title_lower, 'cedar' ) !== false ) {
|
|
$heart_color = '!text-navy';
|
|
} elseif ( strpos( $title_lower, 'contact' ) !== false ) {
|
|
$heart_color = '!text-teal-light';
|
|
}
|
|
echo '<i class="fa fa-heart self-center ' . esc_attr( $heart_color ) . '"></i>';
|
|
}
|
|
$active_class = ( get_permalink() === $item->url || trailingslashit( get_permalink() ) === trailingslashit( $item->url ) ) ? '!text-purple' : '';
|
|
echo '<div class="group flex-initial mx-3 lg:mx-6">';
|
|
echo '<a class="' . esc_attr( $active_class ) . ' hover:underline font-normal capitalize lg:text-lg xl:text-xl text-sm" href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';
|
|
echo '</div>';
|
|
$index++;
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Media Icons -->
|
|
<div class="mx-auto flex justify-center place-items-center flex-wrap h-full flex-row md:mx-0 w-auto">
|
|
<a href="<?php echo esc_url( $social_twitter ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-twitter text-white fa-stack-1x"></i></span></a>
|
|
<a href="<?php echo esc_url( $social_facebook ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-facebook-f text-white fa-stack-1x"></i></span></a>
|
|
<a href="<?php echo esc_url( $social_instagram ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-instagram text-white fa-stack-1x"></i></span></a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile Hamburger Button -->
|
|
<a href="javascript:void(0);" class="icon md:hidden block" onclick="mobileNav()">
|
|
<i id="nav-icon" class="bg-white text-black rounded-full block mr-8 py-4 z-top leading-none fixed px-4 mt-5 text-2xl right-0 md:hidden fas fa-bars"></i>
|
|
</a>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<nav class="w-full bg-white fixed z-50 md:hidden" aria-label="Mobile">
|
|
<div class="w-full hidden h-screen" id="myLinks">
|
|
<div class="flex flex-col mt-4">
|
|
<?php
|
|
if ( has_nav_menu( 'main_navigation' ) ) {
|
|
$locations = get_nav_menu_locations();
|
|
$menu = wp_get_nav_menu_items( (int) $locations['main_navigation'] );
|
|
if ( $menu ) {
|
|
$top_items = array_filter( $menu, function( $item ) { return $item->menu_item_parent == 0; } );
|
|
foreach ( $top_items as $item ) {
|
|
$active_class = ( get_permalink() === $item->url || trailingslashit( get_permalink() ) === trailingslashit( $item->url ) ) ? '!text-yellow' : '';
|
|
echo '<div class="group flex-initial sm:ml-20 ml-6 my-2">';
|
|
echo '<a class="capitalize text-2xl ' . esc_attr( $active_class ) . '" href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';
|
|
|
|
$children = array_filter( $menu, function( $child ) use ( $item ) { return $child->menu_item_parent == $item->ID; } );
|
|
if ( $children ) {
|
|
echo '<i class="ml-2 fas fa-sort-down text-white"></i>';
|
|
echo '<div id="' . esc_attr( sanitize_title( $item->title ) ) . '" class="hidden my-2 ml-5">';
|
|
echo '<div class="bg-gray rounded-xl p-4">';
|
|
foreach ( $children as $child ) {
|
|
echo '<a class="relative z-top text-2xl block mt-4 !text-left" href="' . esc_url( $child->url ) . '">' . esc_html( $child->title ) . '</a>';
|
|
}
|
|
echo '</div></div>';
|
|
}
|
|
echo '</div>';
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="maincontent" class="overflow-hidden min-h-[78dvh]">
|