-
Notifications
You must be signed in to change notification settings - Fork 0
/
header.php
71 lines (69 loc) · 3.62 KB
/
header.php
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
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, target-densityDpi=device-dpi' name='viewport'/>
<title><?php echo wp_get_document_title(); ?></title>
<?php
date_default_timezone_set("America/New_York");
wp_head();
?>
</head>
<body>
<div class="w-full sticky top-0 left-0 border-t-[10px] border-t-tred h-[72px] bg-white border-b z-20">
<div class="absolute top-0 w-full h-full flex items-center justify-center">
<a href="<?php echo home_url("/"); ?>" class="inline-block -mt-2 h-9 relative z-40">
<img src="<?php echo get_template_directory_uri() . "/img/header-logo.svg" ?>" alt="" class="h-full block">
</a>
</div>
<div class="max-w-7xl px-4 mx-auto flex items-center h-full relative z-30">
<button class="lg:hidden" id="uc-menu-open"><i class="fa-solid fa-bars"></i></button>
<p class="font-garamond font-medium hidden lg:block">Documenting and amplifying 5C organizing</p>
<div class="flex items-center h-full ml-auto">
<?php
$topmenu = get_menu_items_by_registered_slug("header");
foreach ($topmenu as $item) {
?>
<a href="<?php echo $item->url?>" class="ml-6 opacity-50 hover:opacity-100 font-medium text-sm hidden lg:block"><?php echo $item->title?></a>
<?php
}
?>
<a href="<?php echo get_theme_mod('uc-header-cta-link'); ?>" class="ml-6 rounded font-bold tracking-[1px] text-white text-xs px-4 py-3 bg-tred uppercase hidden sm:block"><?php echo get_theme_mod('uc-header-cta-text'); ?></a>
</div>
</div>
</div>
<div class="w-full overflow-x-auto h-12">
<div class="flex items-center h-full">
<?php
$catmenu = get_menu_items_by_registered_slug("cats");
$first = reset($catmenu)->title;
$last = end($catmenu)->title;
foreach ($catmenu as $item) {
?>
<a href="<?php echo $item->url?>" class="<?php if ($item->title == $first) {echo "ml-auto mr-4 pl-4";} else if ($item->title == $last) {echo "ml-4 mr-auto pr-4";} else {echo "mx-4";} ?> opacity-50 hover:opacity-100 text-sm flex-shrink-0"><?php echo $item->title ?></a>
<?php
}
?>
</div>
</div>
<div class="fixed h-full top-0 w-64 bg-white border-r z-30 pt-8 px-4 transition-all left-0 -ml-64" id="uc-menu">
<button id="uc-menu-close"><i class="fa-solid fa-xmark"></i></button>
<p class="font-garamond font-medium text-xl mt-8">Documenting and amplifying 5C organizing</p>
<div class="mt-8">
<?php
foreach ($topmenu as $item) {
?>
<a href="<?php echo $item->url?>" class="font-medium text-xl opacity-50 hover:opacity-100 font-light block my-2"><?php echo $item->title?></a>
<?php
}
?>
<a href="<?php echo get_theme_mod('uc-header-cta-link'); ?>" class="mt-8 inline-block rounded font-bold tracking-[1px] text-white text-xs px-4 py-3 bg-tred uppercase"><?php echo get_theme_mod('uc-header-cta-text'); ?></a>
</div>
</div>
<script>
const closeButton = document.getElementById("uc-menu-close");
const menu = document.getElementById("uc-menu");
const openButton =document.getElementById("uc-menu-open");
closeButton.onclick = () => menu.classList.add("-ml-64");
openButton.onclick = () => menu.classList.remove("-ml-64");
</script>