Footer + small tweaks

2 files changed, 116 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..ca39f2b
--- /dev/null
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -0,0 +1,21 @@
+---
+import type { Config } from '@webtypes/Config';
+import config from 'config';
+import NavbarElement from '../navbar/NavbarElement.astro';
+
+---
+
+	<div class="absolute w-full flex flex-row justify-center h-screen max-h-[110px] px-3">
+		<nav class="w-full max-w-[1080px] flex flex-col md:flex-row justify-between items-center">
+			<ul class="flex flex-row justify-start gap-4">
+				{(config as Config).navbar.left.map((element, index) => (
+					<NavbarElement {element} {index}/>
+				))}
+			</ul>
+			<ul class="flex flex-row justify-end gap-4">
+				{(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..8a455de
--- /dev/null
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -0,0 +1,95 @@
+---
+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;
+---
+
+	<li class="sm:relative max-sm:overflow-hidden flex flex-row justify-center items-center text-center">
+		<label for={`navbar-input-${index}`} class="group">
+
+			{element.path
+				? (
+					<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"/>}
+					</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"/>}
+					</p>
+				)}
+
+			{element.dropdown && (
+				<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
+						group-hover:pointer-events-auto group-hover: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
+								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-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>
+								))}
+							</ul>
+						</ScrollbarOverlayContainer>
+					</div>
+			)}
+		</label>
+	</li>