diff options
Diffstat (limited to 'apps/website/src/components/base/NavbarElement.astro')
| -rw-r--r-- | apps/website/src/components/base/NavbarElement.astro | 32 |
1 files changed, 17 insertions, 15 deletions
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro index 4f82e8b..a7a0768 100644 --- a/apps/website/src/components/base/NavbarElement.astro +++ b/apps/website/src/components/base/NavbarElement.astro @@ -1,11 +1,12 @@ --- -import ChevronDown from "@components/icons/ChevronDown.astro"; +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; @@ -25,23 +26,24 @@ const { <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 />} + {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 && <ChevronDown />} + {element.dropdown && <Icon icon="chevron-down" />} </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 + <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 @@ -50,9 +52,9 @@ const { 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 + <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 @@ -62,9 +64,9 @@ const { {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="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} />} + {item.logo && <Logo size={40} logo={item.logo} />} </div> <div class="flex flex-col justify-start items-start"> @@ -74,7 +76,7 @@ const { </div> <p class="text-sm text-gray-400 font-light">{item.description}</p> </div> - </div> + </div> </a> </li> ))} @@ -83,4 +85,4 @@ const { </div> )} </label> -</li>
\ No newline at end of file +</li> |