From 9dc7bb234363aa9cf0222400e9009a19b97c7cc1 Mon Sep 17 00:00:00 2001
From: No0ne003 <hi.yassir.op@gmail.com>
Date: Mon, 4 Mar 2024 13:53:44 +0100
Subject: [PATCH] make the header/nav more responsive [I don't have any idea
 how to make it look good and responsive]

---
 src/layouts/header.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/header.jsx b/src/layouts/header.jsx
index 2f147f9..bf39b6a 100644
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@@ -45,7 +45,7 @@ function Navigation() {
   const { theme } = useTheme();
 
   return (
-    <nav className="flex items-center gap-6">
+    <nav className="flex items-center gap-2 sm:gap-6">
       <DonateToPalestine />
       <NavLinks
         logo={theme === 'dark' ? githubLogoDark : githubLogoLight}
@@ -60,9 +60,9 @@ function Navigation() {
 function DonateToPalestine() {
   return (
     <Button variant="outline" asChild>
-      <a className='space-x-2 flex items-center' href="https://donate.unrwa.org/gaza/~my-donation?_cv=1" target='_blank' rel='noopener noreferrer'>
+      <a className='sm:space-x-2 sm:flex sm:items-center' href="https://donate.unrwa.org/gaza/~my-donation?_cv=1" target='_blank' rel='noopener noreferrer'>
         <img className="size-4" src={palestineSvg} alt="Palestine" />
-        <span>Donate Now</span>
+        <span className='hidden sm:block'>Donate Now</span>
       </a>
     </Button>
   )