wm-wordpress-base-theme/header.php at main · workingmodel/wm-wordpress-base-theme · 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
<?php
/**
 * The header template
 *
 * @package WM_Base_Theme
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>

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

<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-black focus:text-white">
  <?php esc_html_e('Skip to content', 'wm-base-theme'); ?>
</a>

<div id="page" class="site">
  <?php
  // Left and right background gutters with diagonal stripe patterns
  ?>
  <div class="fixed top-0 bottom-0 left-0 w-12 border-x border-x-[var(--pattern-fg)] gutter-pattern z-0" aria-hidden="true"></div>
  <div class="fixed top-0 bottom-0 right-0 w-12 border-x border-x-[var(--pattern-fg)] gutter-pattern-right z-0" aria-hidden="true"></div>

  <div class="main-content-wrapper">
  <header id="masthead" class="site-header">
    <div class="container">
      <?php
      if (has_custom_logo()) {
        the_custom_logo();
      } else {
        ?>
        <a href="<?php echo esc_url(home_url('/')); ?>" class="site-logo">
          <?php bloginfo('name'); ?>
        </a>
        <?php
      }
      ?>

      <div class="site-header__controls">
        <button
          data-dark-toggle
          class="dark-mode-toggle"
          aria-pressed="false"
          aria-label="Switch to dark mode"
          type="button"
        ></button>

        <button
          class="nav-toggle"
          aria-expanded="false"
          aria-controls="mobile-drawer"
          aria-label="<?php esc_attr_e( 'Open navigation', 'wm-base-theme' ); ?>"
          type="button"
        >
          <span class="nav-toggle__bar"></span>
          <span class="nav-toggle__bar"></span>
          <span class="nav-toggle__bar"></span>
        </button>
      </div>

      <nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Primary', 'wm-base-theme' ); ?>">
        <?php
        wp_nav_menu( array(
          'theme_location' => 'primary',
          'menu_id'        => 'primary-menu',
          'container'      => false,
        ) );
        ?>
      </nav>

      <div id="mobile-drawer" class="mobile-drawer" aria-hidden="true" aria-label="<?php esc_attr_e( 'Mobile navigation', 'wm-base-theme' ); ?>">
        <div class="mobile-drawer__inner">
          <?php
          wp_nav_menu( array(
            'theme_location' => 'primary',
            'menu_id'        => 'mobile-menu',
            'container'      => false,
          ) );
          ?>
        </div>
      </div>
      <div class="mobile-drawer__overlay" aria-hidden="true"></div>
    </div>
  </header>