aboutsummaryrefslogtreecommitdiff
path: root/apps/website/src/components/base/NavbarElement.astro
diff options
context:
space:
mode:
Diffstat (limited to 'apps/website/src/components/base/NavbarElement.astro')
-rw-r--r--apps/website/src/components/base/NavbarElement.astro90
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>