diff options
Diffstat (limited to 'apps/website/src/components/base/NavbarElement.astro')
-rw-r--r-- | apps/website/src/components/base/NavbarElement.astro | 90 |
1 files changed, 44 insertions, 46 deletions
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro index 17c3662..6d549bf 100644 --- a/apps/website/src/components/base/NavbarElement.astro +++ b/apps/website/src/components/base/NavbarElement.astro @@ -1,11 +1,11 @@ --- -import type { LogoType, NavbarElement } from '@webtypes/Config'; -import Logo from '@components/logos/Logo.astro'; import Icon from '@components/icons/Icon.astro'; -import ScreenOverlay from './ScreenOverlay.astro'; +import Logo from '@components/logos/Logo.astro'; +import type { LogoType, NavbarElement } from '@webtypes/Config'; import Header from './Header.astro'; -import Tag from './Tag.astro'; +import ScreenOverlay from './ScreenOverlay.astro'; import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro'; +import Tag from './Tag.astro'; interface Props { element: NavbarElement @@ -25,66 +25,64 @@ 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 && <Icon icon="chevron-down" />} + {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" />} + {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"> + <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 + 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 + 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 - `} - > + 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 - `} - > + 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="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> + <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> |