diff options
Diffstat (limited to 'apps/website/src/components/base/NavbarElement.astro')
| -rw-r--r-- | apps/website/src/components/base/NavbarElement.astro | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro new file mode 100644 index 0000000..4f82e8b --- /dev/null +++ b/apps/website/src/components/base/NavbarElement.astro @@ -0,0 +1,86 @@ +--- +import ChevronDown from "@components/icons/ChevronDown.astro"; +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"; + +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 && <ChevronDown />} + </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 && <ChevronDown />} + </p> + )} + + {element.dropdown && ( + <ScreenOverlay class="max-sm:group-focus-within:opacity-100" /> + <input type="checkbox" id={`navbar-input-${index}`} class="peer appearance-none absolute"> + <div class={`transition-opacity + 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 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 + `}> + <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-white-hover"> + <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>
\ No newline at end of file |