From 334a893a85b6f2e3ec8a4ce2eb48b3f26430be2b Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Tue, 23 Jul 2024 20:50:37 +0200
Subject: [PATCH] Responsive navbar for desktop

---
 assets/tailwind.css             |  4 ++++
 src/components/layout/navbar.rs | 41 ++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/assets/tailwind.css b/assets/tailwind.css
index 4126de1..4e2f923 100644
--- a/assets/tailwind.css
+++ b/assets/tailwind.css
@@ -2053,6 +2053,10 @@ html {
   width: 100%;
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
diff --git a/src/components/layout/navbar.rs b/src/components/layout/navbar.rs
index 0daeedf..0c52f00 100644
--- a/src/components/layout/navbar.rs
+++ b/src/components/layout/navbar.rs
@@ -7,25 +7,28 @@ use crate::Route;
 pub fn Navbar() -> Element {
     rsx! {
         div {
-            class: "bg-base-200 min-h-16 flex items-center justify-around",
-            Link {
-                to: Route::Home {},
-                class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
-                icons::Home {},
-                "Home"
-            },
-            Link {
-                to: Route::Home {},
-                class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
-                icons::Newspaper {},
-                div { class: "font-normal", "Nieuws" }
-            },
-            Link {
-                to: Route::Home {},
-                class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
-                icons::Calendar {},
-                span { class: "font-normal", "Agenda" }
-            },
+            class: "bg-base-200 min-h-16 flex justify-center",
+            div {
+                class: "flex items-center justify-around max-w-lg w-full",
+                Link {
+                    to: Route::Home {},
+                    class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
+                    icons::Home {},
+                    "Home"
+                },
+                Link {
+                    to: Route::Home {},
+                    class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
+                    icons::Newspaper {},
+                    div { class: "font-normal", "Nieuws" }
+                },
+                Link {
+                    to: Route::Home {},
+                    class: "btn btn-ghost flex-col flex-nowrap py-1 gap-1 font-normal h-max",
+                    icons::Calendar {},
+                    span { class: "font-normal", "Agenda" }
+                },
+            }
         }
     }
 }