blob: b0f1282c647f85bbe99b890e0b32e2456c6f5461 (
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
|
---
import ChevronDown from "@components/icons/ChevronDown.svg";
import type { LogoType, NavbarElement } from "@webtypes/Config";
import ScreenOverlay from "./ScreenOverlay.astro";
import Header from "./Header.astro";
import Tag from "./Tag.astro";
import Logo from "@components/logos/Logo.astro";
import ScrollbarOverlayContainer from "./ScrollbarOverlayContainer.astro";
import Icon from "@components/icons/Icon.astro";
interface Props {
element: NavbarElement;
index: number;
}
const {
element,
index
} = Astro.props;
---
<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
<label for={`navbar-input-${index}`} class="group">
{element.path ? (
<a href={element.path} class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500">
{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" />}
</a>
) : (
<p class="p-2 flex flex-row justify-center items-center text-gray-700 hover:text-blue-500 cursor-default">
{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>
)}
{element.dropdown && (
<ScreenOverlay class="max-sm:group-focus-within:opacity-100" />
<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
md:top-full md:right-0
group-focus-within:pointer-events-auto group-focus-within:opacity-100
focus-within:pointer-events-auto focus-within:opacity-100
hover:pointer-events-auto hover:opacity-100
`}>
<ScrollbarOverlayContainer tabindex="-1" class={`
bg-gray-50
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
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-colors text-left w-full flex flex-row justify-start rounded-md items-center px-6 py-4 gap-6 hover:bg-blue-50">
<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 size="sm" class="text-gray-800">{item.name}</Header>
{item.tag && <Tag>{item.tag}</Tag>}
</div>
<p class="text-sm text-gray-400 font-light">{item.description}</p>
</div>
</div>
</a>
</li>
))}
</ul>
</ScrollbarOverlayContainer>
</div>
)}
</label>
</li>
|
