Add blur effect on navbar(s)

This commit is contained in:
Ahmed Al-Taiar
2024-10-08 14:36:34 -04:00
parent b89a5ee1b8
commit 6e401cf2b3
3 changed files with 3 additions and 3 deletions

View File

@ -11,7 +11,7 @@ const AccountbarLayout = ({ title, children }: AccountbarLayoutProps) => {
<> <>
<ToasterWrapper /> <ToasterWrapper />
<div className="sticky top-0 z-50 p-2"> <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"> <div className="navbar-start">
<p className="btn btn-ghost font-syne text-xl sm:hidden">{title}</p> <p className="btn btn-ghost font-syne text-xl sm:hidden">{title}</p>
</div> </div>

View File

@ -79,7 +79,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
<> <>
<ToasterWrapper /> <ToasterWrapper />
<div className="sticky top-0 z-50 p-2"> <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="navbar-start space-x-2 lg:first:space-x-0">
<div className="dropdown"> <div className="dropdown">
<div <div

View File

@ -25,7 +25,7 @@ const ScaffoldLayout = ({
<> <>
<ToasterWrapper /> <ToasterWrapper />
<div className="sticky top-0 z-50 p-2"> <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"> <div className="navbar-start space-x-2">
<Link to={routes.home()} className="btn btn-square btn-ghost"> <Link to={routes.home()} className="btn btn-square btn-ghost">
<Icon className="size-8" path={mdiHome} /> <Icon className="size-8" path={mdiHome} />