Update navbar + some tweaks

5 files changed, 47 insertions, 22 deletions

diff --git a/apps/website/config.ts b/apps/website/config.ts
index 0d45d76..f53cff0 100644
--- a/apps/website/config.ts
+++ b/apps/website/config.ts
@@ -21,12 +21,24 @@ export const configConst = {
 				path: '/',
 			},
 			{
+				text: 'Mods',
+				path: '/mods',
+			},
+			{
 				text: 'Projects',
 				dropdown: getProjects().map((project) => {
 					(project as any).path = `/projects/${project.name.toLowerCase()}`;
 					return project;
 				}) as unknown as NavbarDropdown[],
 			},
+			{
+				text: 'About Us',
+				path: '/about',
+			},
+			{
+				text: 'Contact Us',
+				path: '/contact',
+			},
 		],
 	},
 	footer: [
diff --git a/apps/website/src/components/base/navbar/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 96c9955..2a1cd51 100644
--- a/apps/website/src/components/base/navbar/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -11,7 +11,7 @@ import NavbarElement from '../navbar/NavbarElement.astro';
 				<NavbarElement {element} {index}/>
 			))}
 		</ul>
-		<ul class="flex flex-row justify-end gap-4">
+		<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}/>
 			))}
diff --git a/apps/website/src/components/base/navbar/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 346869c..a1c27b9 100644
--- a/apps/website/src/components/base/navbar/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -16,28 +16,31 @@ 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 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.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 && (
+				<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={`
@@ -90,6 +93,8 @@ const {
 							</ul>
 						</ScrollbarOverlayContainer>
 					</div>
-			)}
-		</label>
-	</li>
+				)}
+  </label>
+)}
+ </li>
+{/* WHY IS ESLINT DOING THIS */}
diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro
new file mode 100644
index 0000000..8553c7a
--- /dev/null
+++ b/apps/website/src/pages/mods.astro
@@ -0,0 +1,8 @@
+---
+import Layout from '@layouts/Layout.astro';
+
+---
+
+<Layout>
+
+</Layout>
diff --git a/apps/website/src/pages/projects/oneconfig.astro b/apps/website/src/pages/projects/oneconfig.astro
index 147ea28..148fbec 100644
--- a/apps/website/src/pages/projects/oneconfig.astro
+++ b/apps/website/src/pages/projects/oneconfig.astro
@@ -161,7 +161,7 @@ import { Code } from 'astro:components';
 		<Section class="flex-col justify-center items-center md:h-4/5 md:min-h-[600px] mb-[10rem]">
 			<div class="flex relative md:-left-12">
 				<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl"/>
-				<div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-8">
+				<div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-2 md:gap-y-8">
 					<Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-72 md:h-auto"></Logo>
 					<Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/>
 				</div>