From 6e401cf2b3b98215389c7cc0d24a0e8d31f5b9f9 Mon Sep 17 00:00:00 2001
From: Ahmed Al-Taiar <ahmed.altaiar.06@gmail.com>
Date: Tue, 8 Oct 2024 14:36:34 -0400
Subject: [PATCH] Add blur effect on navbar(s)

---
 web/src/layouts/AccountbarLayout/AccountbarLayout.tsx | 2 +-
 web/src/layouts/NavbarLayout/NavbarLayout.tsx         | 2 +-
 web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/layouts/AccountbarLayout/AccountbarLayout.tsx b/web/src/layouts/AccountbarLayout/AccountbarLayout.tsx
index cd28b85..99a4843 100644
--- a/web/src/layouts/AccountbarLayout/AccountbarLayout.tsx
+++ b/web/src/layouts/AccountbarLayout/AccountbarLayout.tsx
@@ -11,7 +11,7 @@ const AccountbarLayout = ({ title, children }: AccountbarLayoutProps) => {
     <>
       <ToasterWrapper />
       <div className="sticky top-0 z-50 p-2">
-        <div className="navbar rounded-xl bg-base-300 shadow-xl">
+        <div className="navbar rounded-xl bg-base-300 backdrop-blur bg-opacity-90 shadow-xl">
           <div className="navbar-start">
             <p className="btn btn-ghost font-syne text-xl sm:hidden">{title}</p>
           </div>
diff --git a/web/src/layouts/NavbarLayout/NavbarLayout.tsx b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
index 2f862f7..5301911 100644
--- a/web/src/layouts/NavbarLayout/NavbarLayout.tsx
+++ b/web/src/layouts/NavbarLayout/NavbarLayout.tsx
@@ -79,7 +79,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
     <>
       <ToasterWrapper />
       <div className="sticky top-0 z-50 p-2">
-        <div className="navbar rounded-xl bg-base-300 shadow-xl">
+        <div className="navbar rounded-xl bg-base-300 backdrop-blur bg-opacity-90 shadow-xl">
           <div className="navbar-start space-x-2 lg:first:space-x-0">
             <div className="dropdown">
               <div
diff --git a/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx b/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
index 9be6b48..6bd59b0 100644
--- a/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
+++ b/web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx
@@ -25,7 +25,7 @@ const ScaffoldLayout = ({
     <>
       <ToasterWrapper />
       <div className="sticky top-0 z-50 p-2">
-        <div className="navbar rounded-xl bg-base-300 font-syne shadow-xl">
+        <div className="navbar rounded-xl bg-base-300 font-syne backdrop-blur bg-opacity-90 shadow-xl">
           <div className="navbar-start space-x-2">
             <Link to={routes.home()} className="btn btn-square btn-ghost">
               <Icon className="size-8" path={mdiHome} />