2 files changed, 123 insertions, 0 deletions
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
new file mode 100644
index 0000000..8903b7e
--- /dev/null
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -0,0 +1,23 @@
+---
+import type { Config } from '@webtypes/Config';
+import type { HTMLAttributes } from 'astro/types';
+import config from 'config';
+import NavbarElement from '../navbar/NavbarElement.astro';
+
+interface Props extends HTMLAttributes<'div'> {}
+const props = Astro.props;
+---
+<div {...props} class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3 z-navbar text-[16px]">
+	<nav class="w-full max-w-[1024px] flex flex-col md:flex-row justify-between items-center">
+		<ul class="flex flex-row justify-start gap-4 max-md:mt-4">
+			{(config as Config).navbar.left.map((element, index) => (
+				<NavbarElement {element} {index}/>
+			))}
+		</ul>
+		<ul class="flex flex-row justify-center md:justify-end gap-4 flex-wrap">
+			{(config as Config).navbar.right.map((element, index) => (
+				<NavbarElement {element} {index}/>
+			))}
+		</ul>
+	</nav>
+</div>
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 */}