-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathheader.templ
110 lines (107 loc) · 6.07 KB
/
header.templ
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
110
package components
type CurrentPage string
const (
CurrentPageHome CurrentPage = "home"
CurrentPageArchived CurrentPage = "arhcived"
CurrentPageSettings CurrentPage = "settings"
)
templ header(currentPage CurrentPage) {
{{ atHome := currentPage == CurrentPageHome }}
{{ atArchived := currentPage == CurrentPageArchived }}
<style type="text/css">
.dropdown:focus-within .dropdown-menu {
display: block;
}
</style>
<nav class="bg-white shadow">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<div class="flex">
<div class="-ml-2 mr-2 flex items-center md:hidden">
<!-- Mobile menu button -->
<button
type="button"
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
aria-controls="mobile-menu"
aria-expanded="false"
onclick="toggleSlideOver('mobile-menu')"
>
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex flex-shrink-0 items-center">
<img class="h-12 w-auto" src="/assets/img/icon.webp" alt="Pathwise"/>
</div>
<div class="hidden md:ml-6 md:flex md:space-x-8">
<a href="/" class={ "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-900", templ.KV("border-blue-500 border-b-2", atHome) }>Job Applications</a>
</div>
<div class="hidden md:ml-6 md:flex md:space-x-8">
<a href="/archives" class={ "inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-900", templ.KV("border-blue-500 border-b-2", atArchived) }>Archives</a>
</div>
</div>
<div class="flex items-center">
if atHome {
<div class="flex-shrink-0">
<button
type="button"
class="relative inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
onclick="toggleSlideOver('new-job')"
>
<svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"></path>
</svg>
Add
</button>
<button
type="button"
class="relative inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-100 ring-inset ring-gray-300 ring-1"
onclick="toggleModal('archive-jobs')"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"></path>
</svg>
Archive
</button>
</div>
}
<div class="hidden md:ml-4 md:flex md:flex-shrink-0 md:items-center">
<!-- Profile dropdown -->
<div class="dropdown relative ml-3">
<div>
<button type="button" class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg>
</button>
</div>
<!-- Dropdown menu -->
<div class="dropdown-menu absolute hidden right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="/settings" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="/signout" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
@drawer("mobile-menu", "") {
<div class="md:hidden" id="mobile-menu">
<div class="pb-3 pt-4">
<div class="mt-3 space-y-1">
<a href="/" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Job Applications</a>
<a href="/archives" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Archives</a>
<a href="/settings" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Settings</a>
<a href="/signout" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800 sm:px-6">Sign out</a>
</div>
</div>
</div>
}
}