From 7909f4ed0cbd21bc465c709a3c9b56bceee629a2 Mon Sep 17 00:00:00 2001
From: Manish Suthar <manishsuthar078@gmail.com>
Date: Thu, 20 Mar 2025 04:12:34 +0530
Subject: [PATCH 1/2] impr(ui): hover effect in menu

---
 apps/web/components/BlogAppbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
index defaa0d2..5a25695d 100644
--- a/apps/web/components/BlogAppbar.tsx
+++ b/apps/web/components/BlogAppbar.tsx
@@ -101,7 +101,7 @@ export const BlogAppbar = ({
                   <Link
                     key={problem.id}
                     prefetch
-                    className="w-full max-w-screen-md"
+                    className="w-full max-w-screen-md hover:opacity-70"
                     href={`/tracks/${track.id}/${problem.id}`}
                     onClick={(e) => isDisabled && e.preventDefault()}
                   >

From 65ca3ccdd6a11fc63f7f2ccdbd67f74d109d90b9 Mon Sep 17 00:00:00 2001
From: Manish Suthar <manishsuthar078@gmail.com>
Date: Thu, 20 Mar 2025 04:29:59 +0530
Subject: [PATCH 2/2] refactor(ui): adjust BlogAppbar padding for better text
 access

Replaced p-6 with px-6 pt-6 and mt-6 to resolve an issue where
the transparent BlogAppbar was blocking text selection behind it.
This change maintains the same UI appearance while improving usability.

No breaking changes introduced.
---
 apps/web/components/BlogAppbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
index 5a25695d..06a5d6b8 100644
--- a/apps/web/components/BlogAppbar.tsx
+++ b/apps/web/components/BlogAppbar.tsx
@@ -91,7 +91,7 @@ export const BlogAppbar = ({
           animate={{ opacity: 1, x: 0 }}
           exit={{ x: -20 }}
           transition={{ duration: 0.3 }}
-          className={`${visible ? "translate-y-0" : "-translate-y-full"} px-6`}
+          className={`${visible ? "translate-y-0" : "-translate-y-full"} mt-6 px-6`}
         >
           <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-black/10 pt-4 backdrop-blur-lg">
             {track?.problems?.map((problem: { id: string; title: string }, index: number) => {
@@ -166,7 +166,7 @@ export const BlogAppbar = ({
     ) : (
       <>
         <motion.div
-          className={`z-[50] flex w-full flex-col justify-between gap-2 p-6 md:flex-row ${visible ? "translate-y-0" : "-translate-y-full"}`}
+          className={`z-[50] flex w-full flex-col justify-between gap-2 px-6 pt-6 md:flex-row ${visible ? "translate-y-0" : "-translate-y-full"}`}
           initial={{ y: 0 }}
           animate={{ y: visible ? 0 : -100 }}
           transition={{ duration: 0.3 }}