wp-theme-interactivity/header.php at main · madebyaris/wp-theme-interactivity · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<?php
/**
 * The header for our theme
 *
 * @package Interactivity_Theme
 */

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<div id="page" class="site">

	<header id="masthead" class="site-header">
		<div class="container">
			<?php if ( has_custom_logo() ) : ?>
				<?php the_custom_logo(); ?>
			<?php else : ?>
				<div class="site-branding">
					<h1 class="site-title">
						<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
							<?php bloginfo( 'name' ); ?>
						</a>
					</h1>
					<?php
					$description = get_bloginfo( 'description', 'display' );
					if ( $description || is_customize_preview() ) :
						?>
						<p class="site-description"><?php echo esc_html( $description ); ?></p>
					<?php endif; ?>
				</div>
			<?php endif; ?>

			<div class="header-actions">
				<nav id="site-navigation" class="main-navigation">

					<button
						class="menu-toggle"
						aria-controls="primary-menu"
						aria-expanded="false"
					>
						<span class="hamburger">
							<span></span>
							<span></span>
							<span></span>
						</span>
						<span class="screen-reader-text"><?php esc_html_e( 'Menu', 'interactivity-theme' ); ?></span>
					</button>

					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'primary',
							'menu_id'        => 'primary-menu',
							'fallback_cb'    => false,
							'container'      => false,
							'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
						)
					);
					?>
				</nav>

				<div class="header-search">
				<button
					class="search-toggle"
					aria-label="<?php esc_attr_e( 'Open search', 'interactivity-theme' ); ?>"
					aria-expanded="false"
					aria-controls="header-search-overlay"
				>
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
						<circle cx="11" cy="11" r="8"></circle>
						<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
					</svg>
				</button>
				<div
					id="header-search-overlay"
					class="header-search-overlay"
					aria-hidden="true"
					role="dialog"
					aria-label="<?php esc_attr_e( 'Search', 'interactivity-theme' ); ?>"
				>
					<div class="header-search-overlay__backdrop" data-search-close></div>
					<div class="header-search-overlay__content">
						<?php echo do_blocks( '<!-- wp:interactivity-theme/search /-->' ); ?>
						<button
							type="button"
							class="header-search-overlay__close"
							aria-label="<?php esc_attr_e( 'Close search', 'interactivity-theme' ); ?>"
							data-search-close
						>
							&times;
						</button>
					</div>
				</div>
				</div>
			</div>
		</div>
	</header>

	<div id="content" class="site-content">