wpkit/header.php at main · client-studio/wpkit · 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
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
   <head>
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="<?php bloginfo( "template_directory",); ?>/webfonts/font.css" rel="stylesheet">
      <?php wp_head(); ?>
   </head>

   <body <?php body_class( 'antialiased bg-light min-h-screen' ); ?>>
      <div id="page" class="min-h-screen" x-data="header()" x-init="init()" x-effect="effect()" @set-full-screen.window="setFullScreen" @set-mobile-full-screen.window="setMobileFullScreen">

         <header class="site-header w-full fixed top-0 z-50 transition-transform duration-300 ease-linear"
            :class="{ '-translate-y-full': scroll_direction === 'down', 'translate-y-0': scroll_direction === 'up' }">
            <?php if( have_rows('infobar', 'option') ): while ( have_rows('infobar', 'option') ) : the_row(); ?><?php if ( get_sub_field('show_infobar') ): ?>

            <div class="infobar full-container overflow-hidden bg-black text-white"
               x-show="show_infobar && !is_full_screen && !is_mobile_full_screen"
               x-collapse.duration.500ms
               @scroll.window="show_infobar = window.scrollY <= 100 && !is_full_screen && !is_mobile_full_screen">
               <div class="site-container flex pb-1.5 pt-3">
                  <div class="grow mr-2">
                     <h5 class="text-neutral-400 p-0 m-0"><?php the_sub_field('text') ?></h5>
                  </div>

                  <?php $link = get_sub_field('link'); if( $link ):
                     $link_url = $link['url'];
                     $link_title = $link['title'];
                  ?>
                  <a class="font-medium text-white" href="<?php echo esc_url($link_url); ?>" target="_blank">
                     <h5 class="ml-auto">
                        <?php echo esc_html($link_title); ?>
                     </h5>
                  </a>
                  <?php endif; ?>
               </div>
            </div>
            <?php endif; endwhile; endif; ?>

            <div class="full-container main-header bg-black/50 backdrop-blur-lg text-white">
               <nav class="site-container z-50">
                  <div class="grid grid-cols-2 items-center w-full py-2.5 lg:py-3">
                     <a class="logo relative z-50" href="<?php echo home_url(); ?>">
                        <span class="sr-only"><?php echo get_bloginfo( 'name' );?></span>
                           <img class="h-5 w-auto"
                           src="<?php bloginfo("template_directory"); ?>/img/logo.svg"
                           alt="<?php echo get_bloginfo( 'name' );?>" >
                     </a>

                     <!-- options: dropdown or fullscreen -->
                     <?php get_template_part('template-parts/menu/desktop', 'dropdown'); ?>

                     <!-- remember to disable md:hidden on icon if fullscreen -->
                     <div class="block md:hidden ml-auto" @click="show_menu = !show_menu">
                        <button type="button" class="w-9 h-9 align-middle relative menu-btn fill-neutral-300" aria-controls="mobile-menu" aria-expanded="false">
                           <span class="sr-only">Toggle menu</span>
                           <svg
                              :class="{ 'opacity-0': show_menu, 'opacity-100': !show_menu }"
                              class="icon-open transition-opacity duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 0 9 L 0 11 L 50 11 L 50 9 Z M 0 24 L 0 26 L 50 26 L 50 24 Z M 0 39 L 0 41 L 50 41 L 50 39 Z"/></svg>
                           <svg
                              :class="{ 'opacity-100': show_menu, 'opacity-0': !show_menu }"
                              class="icon-close transition-opacity duration-300 absolute top-0" xmlns="http://www.w3.org/2000/svg" fill="white" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"><path d="M0,24v2h50v-2H0z"/></svg>
                        </button>
                     </div>
                  </div>
               </nav>

               <!-- Mobile menu options: dropdown or fullscreen -->
               <?php get_template_part('template-parts/menu/mobile', 'dropdown'); ?>

            </div>
         </header>

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