From 6c5d6c670b9df7f92dacd336e733d66560ec6c2a Mon Sep 17 00:00:00 2001
From: Krisha Gandhi <krishagandhi0711@gmail.com>
Date: Mon, 29 Sep 2025 17:24:36 +0530
Subject: [PATCH 1/2] Enhanced background with flag in waving motion

---
 user/src/index.css | 204 ++++++++++++++++++++++++++-------------------
 1 file changed, 119 insertions(+), 85 deletions(-)

diff --git a/user/src/index.css b/user/src/index.css
index 75ef387..d8a964a 100644
--- a/user/src/index.css
+++ b/user/src/index.css
@@ -1,121 +1,155 @@
 @import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
-
 @import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap");
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+/* ========================================================================== 
+   THEME & COLOR VARIABLES 
+========================================================================== */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 20 33% 98%;
+    --foreground: 222.2 84% 5%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 222.2 84% 5%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --popover-foreground: 222.2 84% 5%;
+    --primary: 20 75% 35%;
+    --primary-foreground: 20 95% 98%;
+    --secondary: 30 40% 96%;
+    --secondary-foreground: 25 60% 20%;
+    --muted: 28 25% 94%;
+    --muted-foreground: 25 20% 50%;
+    --accent: 27 70% 92%;
+    --accent-foreground: 20 70% 20%;
+    --destructive: 0 72% 45%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 28 20% 85%;
+    --input: 28 20% 85%;
+    --ring: 25 40% 35%;
+    --radius: 0.6rem;
   }
+
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 222.2 84% 5%;
+    --foreground: 30 30% 95%;
+    --card: 25 30% 10%;
+    --card-foreground: 30 30% 95%;
+    --popover: 25 30% 12%;
+    --popover-foreground: 30 30% 95%;
+    --primary: 25 75% 55%;
+    --primary-foreground: 222.2 47% 10%;
+    --secondary: 25 25% 18%;
+    --secondary-foreground: 30 30% 95%;
+    --muted: 25 25% 20%;
+    --muted-foreground: 25 20% 70%;
+    --accent: 25 25% 20%;
+    --accent-foreground: 30 30% 95%;
+    --destructive: 0 65% 35%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 25 25% 25%;
+    --input: 25 25% 25%;
+    --ring: 25 35% 70%;
   }
 }
+
+/* ========================================================================== 
+   BASE STYLES 
+========================================================================== */
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border transition-colors duration-200 ease-in-out;
   }
+
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
+    background-color: transparent; /* Allows pseudo-elements to be visible */
+    position: relative;
+    isolation: isolate;
+    overflow-x: hidden;
+    font-smooth: always;
   }
 }
 
-.jost {
-  font-family: "Jost", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 600;
-  font-style: normal;
-}
+/* ========================================================================== 
+   PREMIUM BACKGROUND LAYERS
+========================================================================== */
+@layer base {
+  /* Layer 1: Base Background Color (Farthest Back) */
+  body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    z-index: -2;
+    background-color: hsl(var(--background));
+    transition: background-color 0.3s ease-in-out;
+  }
 
-.mulish {
-  font-family: "Mulish", sans-serif;
-  font-optical-sizing: auto;
-  font-style: normal;
-}
+  /* Layer 2: Centered, Waving & Blurred Flag */
+  body::after {
+    content: "";
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 60vmin; /* Increased size for better visibility */
+    height: calc(60vmin * 2 / 3);
+    z-index: -1;
+    
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3e%3cdefs%3e%3cfilter id='wave-effect'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.02 0.04' numOctaves='4' seed='0' result='noise'%3e%3canimate attributeName='baseFrequency' values='0.02 0.04; 0.03 0.055; 0.025 0.05; 0.02 0.04' dur='10s' repeatCount='indefinite' /%3e%3c/feTurbulence%3e%3cfeDisplacementMap in='SourceGraphic' in2='noise' scale='25' xChannelSelector='R' yChannelSelector='G'%3e%3canimate attributeName='scale' values='25; 35; 30; 25' dur='10s' repeatCount='indefinite' /%3e%3c/feDisplacementMap%3e%3c/filter%3e%3cg id='chakra'%3e%3cpath d='M150,67 a 33,33 0 1,1 0,66 a 33,33 0 1,1 0,-66 M150,71 a 29,29 0 1,0 0,58 a 29,29 0 1,0 0,-58' fill='%23000080' fill-rule='evenodd'/%3e%3ccircle cx='150' cy='100' r='10' fill='%23000080'/%3e%3cdefs%3e%3cg id='spoke'%3e%3cpath d='M150 89 L149.5 69 L150.5 69 Z' fill='%23000080'/%3e%3c/g%3e%3c/defs%3e%3cuse href='%23spoke'/%3e%3cuse href='%23spoke' transform='rotate(15 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(30 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(45 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(60 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(75 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(90 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(105 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(120 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(135 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(150 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(165 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(180 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(195 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(210 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(225 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(240 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(255 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(270 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(285 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(300 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(315 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(330 150 100)'/%3e%3cuse href='%23spoke' transform='rotate(345 150 100)'/%3e%3c/g%3e%3c/defs%3e%3cg filter='url(%23wave-effect)'%3e%3crect width='300' height='200' fill='%23FF9933'/%3e%3crect width='300' height='133.33' y='33.33' fill='%23FFFFFF'/%3e%3crect width='300' height='66.67' y='133.33' fill='%23138808'/%3e%3c/g%3e%3cuse href='%23chakra'/%3e%3c/svg%3e");
 
-.mulish-bold {
-  font-family: "Mulish", sans-serif;
-  font-optical-sizing: auto;
-  font-weight: 700;
-  font-style: bold;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    
+    opacity: 0.18;
+    transition: opacity 0.3s ease-in-out;
+
+    /* --- Reduced blur for clearer wave visibility --- */
+    filter: blur(2px);
+    animation: flagFloat 16s ease-in-out infinite;
+  }
+  
+  @keyframes flagFloat {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); }
+    25% { transform: translate(-48%, -51%) scale(1.03); }
+    50% { transform: translate(-52%, -49%) scale(0.97); }
+    75% { transform: translate(-49%, -52%) scale(1.02); }
+  }
+  
+  body.dark::after {
+    opacity: 0.25;
+  }
 }
 
+/* ========================================================================== 
+   GLOBAL & UTILITIES
+========================================================================== */
+.jost { font-family: "Jost", sans-serif; font-weight: 600; }
+.mulish { font-family: "Mulish", sans-serif; }
+.mulish-bold { font-family: "Mulish", sans-serif; font-weight: 700; }
+
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  list-style-type: none;
-  font-family: "Jost", Courier, monospace;
-  /* outline: 2px solid red; */
+  margin: 0; padding: 0; box-sizing: border-box;
+  list-style: none; font-family: "Jost", sans-serif;
   scroll-behavior: smooth;
 }
+.cursor-pointer { cursor: pointer; }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.box-shadows{
-  box-shadow: -1px 1px 5px 5px rgba(0,0,0,0.1);
+.box-shadows {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
+  border-radius: var(--radius);
+  background: white;
 }
 
-
-
 @layer utilities {
   .inputClassName {
-    @apply w-full py-1 mt-3 border border-gray-500 rounded-sm;
+    @apply w-full py-2 px-3 mt-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[#e86a33] focus:border-[#e86a33];
+    transition: all 0.2s ease-in-out;
   }
-
-  .active{
-    @apply h-10 p-3 bg-[#e5e7eb] rounded-md font-semibold;
+  .active {
+    @apply h-10 px-4 bg-gradient-to-r from-[#f8b2a] to-[#e86a33] text-white rounded-md font-semibold shadow-md;
   }
-}
+}
\ No newline at end of file

From 5458cb70fe13a28c0b37f2465a4947a7f43e6ced Mon Sep 17 00:00:00 2001
From: Krisha Gandhi <krishagandhi0711@gmail.com>
Date: Mon, 29 Sep 2025 17:40:52 +0530
Subject: [PATCH 2/2] Fix: remove focus/highlight from Navbar after using
 browser back button

---
 admin/src/components/Navbar.jsx    |  26 +--
 employee/src/components/Navbar.jsx |  23 +--
 user/src/components/Navbar.jsx     | 247 +++++++++++++++++++----------
 3 files changed, 185 insertions(+), 111 deletions(-)

diff --git a/admin/src/components/Navbar.jsx b/admin/src/components/Navbar.jsx
index 033e6ec..c0a907d 100644
--- a/admin/src/components/Navbar.jsx
+++ b/admin/src/components/Navbar.jsx
@@ -1,15 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "./ui/button";
-import { ArrowRightFromLine, ChevronDown } from "lucide-react";
+import { ArrowRightFromLine } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 
-
-
-
 const Navbar = () => {
   const location = useLocation();
+
+  useEffect(() => {
+    // Remove focus/highlight from any active element when location changes
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+  }, [location]);
+
   return (
-    <div className="px-[5vw] py-2  w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5   z-10 sticky top-0 left-0 h-16">
+    <div className="px-[5vw] py-2 w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5 z-10 sticky top-0 left-0 h-16">
       <div className="flex gap-5">
         <Link to="/">
           <p>Home</p>
@@ -24,19 +29,14 @@ const Navbar = () => {
         <p>Contact Us</p>
       </div>
       <div className="flex gap-4">
-        {location.pathname === "/login" ||
-        location.pathname === "/userlogin" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/login" && location.pathname !== "/userlogin" && (
           <Link to="/login">
             <Button className="gap-2 px-5 text-xl bg-green-500 hover:bg-white hover:text-black">
               LOGIN <ArrowRightFromLine />
             </Button>
           </Link>
         )}
-        {location.pathname === "/register" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/register" && (
           <Link to="/register">
             <Button className="text-xl bg-transparent hover:bg-white hover:text-black">
               REGISTER
diff --git a/employee/src/components/Navbar.jsx b/employee/src/components/Navbar.jsx
index 8e940a6..a103349 100644
--- a/employee/src/components/Navbar.jsx
+++ b/employee/src/components/Navbar.jsx
@@ -1,12 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "./ui/button";
-import { ArrowRightFromLine, ChevronDown } from "lucide-react";
+import { ArrowRightFromLine } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 
 const Navbar = () => {
   const location = useLocation();
+
+  useEffect(() => {
+    // Remove focus/highlight from any active element when location changes
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+  }, [location]);
+
   return (
-    <div className="px-[5vw] py-2  w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5   z-10 sticky top-0 left-0 h-16">
+    <div className="px-[5vw] py-2 w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5 z-10 sticky top-0 left-0 h-16">
       <div className="flex gap-5">
         <Link to="/">
           <p>Home</p>
@@ -21,19 +29,14 @@ const Navbar = () => {
         <p>Contact Us</p>
       </div>
       <div className="flex gap-4">
-        {location.pathname === "/login" ||
-        location.pathname === "/userlogin" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/login" && location.pathname !== "/userlogin" && (
           <Link to="/login">
             <Button className="gap-2 px-5 text-xl bg-green-500 hover:bg-white hover:text-black">
               LOGIN <ArrowRightFromLine />
             </Button>
           </Link>
         )}
-        {location.pathname === "/register" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/register" && (
           <Link to="/register">
             <Button className="text-xl bg-transparent hover:bg-white hover:text-black">
               REGISTER
diff --git a/user/src/components/Navbar.jsx b/user/src/components/Navbar.jsx
index 720e1f7..37b2a1b 100644
--- a/user/src/components/Navbar.jsx
+++ b/user/src/components/Navbar.jsx
@@ -1,9 +1,15 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Button } from "./ui/button";
 import { Menu, ArrowRightFromLine, CircleUserRound } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-// Keep your custom tooltip import if needed for user icon
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 // Rename react-tooltip import to avoid conflict
@@ -24,11 +30,18 @@ const tooltipStyle = {
   zIndex: 9999,
 };
 
-
 const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
   const location = useLocation();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
+  // Clear dropdown focus when route changes
+  useEffect(() => {
+    const dropdownTrigger = document.querySelector("[data-dropdown-trigger]");
+    if (dropdownTrigger) {
+      dropdownTrigger.blur();
+    }
+  }, [location]);
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
@@ -40,14 +53,19 @@ const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
     setIsAuthenticated(false);
   };
 
-  const navLinkClasses = "relative font-medium text-orange-100 dark:text-orange-200 tracking-wide after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-0 after:h-[2px] after:bg-amber-400 after:transition-all after:duration-300 hover:after:w-full hover:text-white dark:hover:text-amber-300";
+  const navLinkClasses =
+    "relative font-medium text-orange-100 dark:text-orange-200 tracking-wide after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-0 after:h-[2px] after:bg-amber-400 after:transition-all after:duration-300 hover:after:w-full hover:text-white dark:hover:text-amber-300";
 
   return (
     <div className="lg:px-[5vw] w-full flex justify-between items-center bg-orange-900/90 dark:bg-gray-900/90 backdrop-blur-lg text-white dark:text-white text-lg z-20 sticky top-0 h-20 shadow-lg border-b border-orange-800/50 dark:border-gray-700/50 md:px-4 px-3 transition-colors duration-500">
       <div className="flex items-center lg:gap-8 md:gap-4">
-        <button className="lg:hidden p-2 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50" onClick={toggleMenu}>
+        <button
+          className="lg:hidden p-2 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+          onClick={toggleMenu}
+        >
           <Menu className="h-7 w-7" />
         </button>
+
         {/* Desktop Links */}
         <Link
           to="/"
@@ -57,13 +75,46 @@ const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
         >
           Home
         </Link>
-
-        <Link to="/about" className={`hidden lg:block ${navLinkClasses}`} data-tooltip-id="nav-about" data-tooltip-content="Learn more About us">About</Link>
-        <Link to="/schemes" className={`hidden lg:block ${navLinkClasses}`} data-tooltip-id="nav-schemes" data-tooltip-content="View Government Schemes">Schemes</Link>
-        <Link to="/dashboard" className={`hidden lg:block ${navLinkClasses}`} data-tooltip-id="nav-dashboard" data-tooltip-content="Go to Dashboard">Dashboard</Link>
-        <Link to="/grievances" className={`hidden lg:block ${navLinkClasses}`} data-tooltip-id="nav-grievances" data-tooltip-content="View Grievances">Grievances</Link>
-        <Link to="/contact" className={`hidden lg:block ${navLinkClasses}`} data-tooltip-id="nav-contact" data-tooltip-content="Contact Us">Contact</Link>
-
+        <Link
+          to="/about"
+          className={`hidden lg:block ${navLinkClasses}`}
+          data-tooltip-id="nav-about"
+          data-tooltip-content="Learn more About us"
+        >
+          About
+        </Link>
+        <Link
+          to="/schemes"
+          className={`hidden lg:block ${navLinkClasses}`}
+          data-tooltip-id="nav-schemes"
+          data-tooltip-content="View Government Schemes"
+        >
+          Schemes
+        </Link>
+        <Link
+          to="/dashboard"
+          className={`hidden lg:block ${navLinkClasses}`}
+          data-tooltip-id="nav-dashboard"
+          data-tooltip-content="Go to Dashboard"
+        >
+          Dashboard
+        </Link>
+        <Link
+          to="/grievances"
+          className={`hidden lg:block ${navLinkClasses}`}
+          data-tooltip-id="nav-grievances"
+          data-tooltip-content="View Grievances"
+        >
+          Grievances
+        </Link>
+        <Link
+          to="/contact"
+          className={`hidden lg:block ${navLinkClasses}`}
+          data-tooltip-id="nav-contact"
+          data-tooltip-content="Contact Us"
+        >
+          Contact
+        </Link>
       </div>
 
       <div className="flex items-center gap-3">
@@ -86,7 +137,10 @@ const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
           </>
         ) : (
           <DropdownMenu>
-            <DropdownMenuTrigger className="p-2 rounded-full outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-orange-900 dark:focus:ring-offset-gray-900">
+            <DropdownMenuTrigger
+              className="p-2 rounded-full outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-orange-900 dark:focus:ring-offset-gray-900"
+              data-dropdown-trigger
+            >
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
@@ -99,14 +153,37 @@ const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
               </TooltipProvider>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="mt-2 bg-orange-900/95 dark:bg-gray-900/95 backdrop-blur-md text-white border-orange-800 dark:border-gray-700 w-56 transition-colors duration-500">
-              <DropdownMenuLabel className="font-bold text-amber-400 dark:text-amber-300">My Account</DropdownMenuLabel>
+              <DropdownMenuLabel className="font-bold text-amber-400 dark:text-amber-300">
+                My Account
+              </DropdownMenuLabel>
               <DropdownMenuSeparator className="bg-orange-800 dark:bg-gray-700" />
-              <Link to='/profile'><DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">Profile</DropdownMenuItem></Link>
-              <Link to='/schemeApplied'><DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">Scheme Applied</DropdownMenuItem></Link>
-              <Link to='/grievancesApplied'><DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">Grievances</DropdownMenuItem></Link>
-              <Link to='/status'><DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">Status</DropdownMenuItem></Link>
+              <Link to="/profile">
+                <DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">
+                  Profile
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/schemeApplied">
+                <DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">
+                  Scheme Applied
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/grievancesApplied">
+                <DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">
+                  Grievances
+                </DropdownMenuItem>
+              </Link>
+              <Link to="/status">
+                <DropdownMenuItem className="cursor-pointer focus:bg-orange-800 dark:focus:bg-gray-700 focus:text-amber-400 dark:focus:text-amber-300">
+                  Status
+                </DropdownMenuItem>
+              </Link>
               <DropdownMenuSeparator className="bg-orange-800 dark:bg-gray-700" />
-              <DropdownMenuItem onClick={handleLogout} className="font-bold text-red-400 dark:text-red-300 cursor-pointer focus:bg-red-500/20 dark:focus:bg-red-700/20 focus:text-red-300 dark:focus:text-red-200">Logout</DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={handleLogout}
+                className="font-bold text-red-400 dark:text-red-300 cursor-pointer focus:bg-red-500/20 dark:focus:bg-red-700/20 focus:text-red-300 dark:focus:text-red-200"
+              >
+                Logout
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         )}
@@ -116,77 +193,71 @@ const Navbar = ({ isAuthenticated, setIsAuthenticated }) => {
       {isMenuOpen && (
         <div className="absolute left-0 w-full bg-orange-900 dark:bg-gray-900 top-20 lg:hidden shadow-xl animate-in slide-in-from-top-4 transition-colors duration-500">
           <div className="flex flex-col p-4 gap-y-2">
-  <Link
-    to="/"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-home"
-    data-tooltip-content="Go to Home Page"
-  >
-    Home
-  </Link>
-
-  <Link
-    to="/about"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-about"
-    data-tooltip-content="Learn more About us"
-  >
-    About
-  </Link>
-
-  <Link
-    to="/schemes"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-schemes"
-    data-tooltip-content="View Government Schemes"
-  >
-    Schemes
-  </Link>
-
-  <Link
-    to="/dashboard"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-dashboard"
-    data-tooltip-content="Go to Dashboard"
-  >
-    Dashboard
-  </Link>
-
-  <Link
-    to="/grievances"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-grievances"
-    data-tooltip-content="View Grievances"
-  >
-    Grievances
-  </Link>
-
-  <Link
-    to="/contact"
-    className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
-    onClick={toggleMenu}
-    data-tooltip-id="nav-contact"
-    data-tooltip-content="Contact Us"
-  >
-    Contact
-  </Link>
-</div>
-
+            <Link
+              to="/"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-home"
+              data-tooltip-content="Go to Home Page"
+            >
+              Home
+            </Link>
+            <Link
+              to="/about"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-about"
+              data-tooltip-content="Learn more About us"
+            >
+              About
+            </Link>
+            <Link
+              to="/schemes"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-schemes"
+              data-tooltip-content="View Government Schemes"
+            >
+              Schemes
+            </Link>
+            <Link
+              to="/dashboard"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-dashboard"
+              data-tooltip-content="Go to Dashboard"
+            >
+              Dashboard
+            </Link>
+            <Link
+              to="/grievances"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-grievances"
+              data-tooltip-content="View Grievances"
+            >
+              Grievances
+            </Link>
+            <Link
+              to="/contact"
+              className="block px-4 py-3 rounded-md hover:bg-orange-800/70 dark:hover:bg-gray-700/50"
+              onClick={toggleMenu}
+              data-tooltip-id="nav-contact"
+              data-tooltip-content="Contact Us"
+            >
+              Contact
+            </Link>
+          </div>
         </div>
       )}
-      {/* Place after the entire navbar */}
-<ReactTooltip id="nav-home" style={tooltipStyle} />
-<ReactTooltip id="nav-about" style={tooltipStyle} />
-<ReactTooltip id="nav-schemes" style={tooltipStyle} />
-<ReactTooltip id="nav-dashboard" style={tooltipStyle} />
-<ReactTooltip id="nav-grievances" style={tooltipStyle} />
-<ReactTooltip id="nav-contact" style={tooltipStyle} />
 
+      {/* Tooltips */}
+      <ReactTooltip id="nav-home" style={tooltipStyle} />
+      <ReactTooltip id="nav-about" style={tooltipStyle} />
+      <ReactTooltip id="nav-schemes" style={tooltipStyle} />
+      <ReactTooltip id="nav-dashboard" style={tooltipStyle} />
+      <ReactTooltip id="nav-grievances" style={tooltipStyle} />
+      <ReactTooltip id="nav-contact" style={tooltipStyle} />
     </div>
   );
 };