diff options
Diffstat (limited to 'apps/website/src/components/base/navbar/NavbarElement.astro')
| -rw-r--r-- | apps/website/src/components/base/navbar/NavbarElement.astro | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro new file mode 100644 index 0000000..5e37253 --- /dev/null +++ b/apps/website/src/components/base/navbar/NavbarElement.astro @@ -0,0 +1,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 */} |