blob: 5e372537e894c2fc817f9c84e8f70f7d7df95a28 (
plain)
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
|
---
import Icon from '@components/icons/Icon.astro';
import Logo from '@components/logos/Logo.astro';
import type { LogoType, NavbarElement } from '@webtypes/Config';
import Header from '../Header.astro';
import ScreenOverlay from '../ScreenOverlay.astro';
import ScrollbarOverlayContainer from '../ScrollbarOverlayContainer.astro';
import Tag from '../Tag.astro';
interface Props {
element: NavbarElement
index: number
}
const {
element,
index,
} = Astro.props;
function isCurrentPage(url: string): boolean {
return Astro.url.pathname === url;
}
---
<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
{element.path
? (
<a href={element.path} class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 ${isCurrentPage(element.path) ? 'text-blue-400' : 'text-gray-700'}`}>
{element.text && element.text}
{element.logo && <Logo class="active:scale-95 transition-transform" size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
{element.dropdown && <Icon icon="chevron-down"/>}
</a>
)
: (
<label for={`navbar-input-${index}`} class="group">
{element.dropdown && (
<p class={`p-2 flex flex-row justify-center items-center hover:text-blue-500 cursor-default ${isCurrentPage(element.dropdown[0].path ?? '') ? 'text-blue-400' : 'text-gray-700'}`}>
{element.text && element.text}
{element.logo && <Logo size={element.logo[1] < 0 ? undefined : element.logo[1]} logo={element.logo[0] as LogoType}/>}
{element.dropdown && <Icon icon="chevron-down"/>}
</p>
<ScreenOverlay class="max-sm:group-focus-within:opacity-100 z-navbar-backdrop"/>
<input tabindex="-1" type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"/>
<div class={`
transition-opacity
fixed md:absolute right-0 max-sm:bottom-0
max-sm:overflow-hidden
max-sm:max-h-[70vh] max-sm:h-screen max-sm:w-screen
pointer-events-none opacity-0
z-navbar
md:top-full md:right-0
group-focus-within:pointer-events-auto group-focus-within:opacity-100
md:group-hover:pointer-events-auto md:group-hover:opacity-100
focus-within:pointer-events-auto focus-within:opacity-100
md:hover:pointer-events-auto md:hover:opacity-100
`}>
<ScrollbarOverlayContainer
tabindex="-1"
class={`
bg-gray-50
border border-gray-100
rounded-t-lg md:rounded-lg
transition-transform
max-sm:translate-y-1/3 max-sm:left-0
group-focus-within:translate-y-0
max-h-full md:max-h-96 overflow-y-auto min-h-full
md:shadow-lg
`}>
<ul class="p-4">
{element.dropdown.map(item => (
<li>
<a href={item.path} class="flex sm:min-w-[400px] sm:max-w-[400px]">
<div class={`transition-[color,background-color,filter] text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 ${item.path ? 'hover:bg-blue-50 active:bg-blue-100' : 'hover:grayscale hover:brightness-75'}`}>
<div class="w-[36px]">
{item.logo && <Logo size={40} logo={item.logo}/>}
</div>
<div class="flex flex-col justify-start items-start">
<div class="flex flex-row gap-2">
<Header inheritSize size="md" class="text-gray-800 text-md md:text-sm font-medium">{item.name}</Header>
{item.tag && <Tag class="text-sm md:text-xxs">{item.tag}</Tag>}
</div>
<p class="text-md md:text-sm text-gray-400 font-light">{item.description}</p>
</div>
</div>
</a>
</li>
))}
</ul>
</ScrollbarOverlayContainer>
</div>
)}
</label>
)}
</li>
{/* WHY IS ESLINT DOING THIS */}
|
