From c6b1c09980ebf6f3bdb047fa307ab02f6c66c0a4 Mon Sep 17 00:00:00 2001 From: ram_baranwal Date: Fri, 22 May 2026 22:49:39 +0530 Subject: [PATCH] Improve homepage and navbar UI --- client/package-lock.json | 58 +- client/src/App.js | 2 + client/src/components/Navbar.css | 130 +++- client/src/components/Navbar.js | 72 +- client/src/pages/Home.css | 142 +++- client/src/pages/Home.js | 20 +- client/src/pages/HomeNew.css | 1063 ++++++++++++++++++++++++++++++ client/src/pages/HomeNew.js | 702 ++++++++++++++++++++ 8 files changed, 2066 insertions(+), 123 deletions(-) create mode 100644 client/src/pages/HomeNew.css create mode 100644 client/src/pages/HomeNew.js diff --git a/client/package-lock.json b/client/package-lock.json index dac8c64..a2f7c46 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -87,6 +87,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz", "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.27.1", @@ -736,6 +737,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz", "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, @@ -1619,6 +1621,7 @@ "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz", "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==", "license": "MIT", + "peer": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-module-imports": "^7.27.1", @@ -2961,7 +2964,6 @@ "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==", "license": "Apache-2.0", "optional": true, - "peer": true, "engines": { "node": ">=10.0" }, @@ -2979,7 +2981,6 @@ "integrity": "sha512-6RX+W5a+ZUY/c/7J5s5jK9UinLfJo5oWKh84fb4X0yK2q4WXEWUWZWuEMjvCb1YNUQhEAhUfr5scEGOH7jC4YQ==", "license": "Apache-2.0", "optional": true, - "peer": true, "engines": { "node": ">=10.0" }, @@ -2997,7 +2998,6 @@ "integrity": "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==", "license": "Apache-2.0", "optional": true, - "peer": true, "engines": { "node": ">=10.0" }, @@ -3015,7 +3015,6 @@ "integrity": "sha512-7NST56/cM/wC2qD9NqUanPz0KiuyDxRKasG3X46iz3b0V8dvdexuGyCOBZCMdrHYaro6+w/H2i6EnJdqzKb69w==", "license": "Apache-2.0", "optional": true, - "peer": true, "dependencies": { "@jsonjoy.com/base64": "^1.1.2", "@jsonjoy.com/buffers": "^1.2.0", @@ -3042,7 +3041,6 @@ "integrity": "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==", "license": "Apache-2.0", "optional": true, - "peer": true, "dependencies": { "@jsonjoy.com/codegen": "^1.0.0", "@jsonjoy.com/util": "^1.9.0" @@ -3064,7 +3062,6 @@ "integrity": "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==", "license": "Apache-2.0", "optional": true, - "peer": true, "dependencies": { "@jsonjoy.com/buffers": "^1.0.0", "@jsonjoy.com/codegen": "^1.0.0" @@ -3671,6 +3668,7 @@ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -4321,8 +4319,7 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz", "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==", "license": "MIT", - "optional": true, - "peer": true + "optional": true }, "node_modules/@types/semver": { "version": "7.7.0", @@ -4410,6 +4407,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", "@typescript-eslint/scope-manager": "5.62.0", @@ -4463,6 +4461,7 @@ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "5.62.0", "@typescript-eslint/types": "5.62.0", @@ -4832,6 +4831,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -4930,6 +4930,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -5858,6 +5859,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", @@ -5904,7 +5906,6 @@ "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "run-applescript": "^7.0.0" }, @@ -6082,6 +6083,7 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz", "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==", "license": "MIT", + "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -6986,6 +6988,7 @@ "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", "license": "ISC", + "peer": true, "engines": { "node": ">=12" } @@ -7155,7 +7158,6 @@ "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" @@ -7173,7 +7175,6 @@ "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=18" }, @@ -7868,6 +7869,7 @@ "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -9319,7 +9321,6 @@ "integrity": "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==", "license": "Apache-2.0", "optional": true, - "peer": true, "engines": { "node": ">=10.0" }, @@ -9850,7 +9851,6 @@ "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=10.18" } @@ -10262,7 +10262,6 @@ "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "is-docker": "^3.0.0" }, @@ -10282,7 +10281,6 @@ "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==", "license": "MIT", "optional": true, - "peer": true, "bin": { "is-docker": "cli.js" }, @@ -10329,7 +10327,6 @@ "integrity": "sha512-6oIwpsgRfnDiyEDLMay/GqCl3HoAtH5+RUKW29gYkL0QA+ipzpDLA16yQs7/RHCSu+BwgbJaOUqa4A99qNVQVw==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=16" }, @@ -10748,6 +10745,7 @@ "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz", "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==", "license": "MIT", + "peer": true, "dependencies": { "@jest/core": "^27.5.1", "import-local": "^3.0.2", @@ -12751,7 +12749,6 @@ "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "@types/retry": "0.12.2", "is-network-error": "^1.0.0", @@ -13054,6 +13051,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -14241,6 +14239,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", "license": "MIT", + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -14606,6 +14605,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz", "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -14747,6 +14747,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz", "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.26.0" }, @@ -14780,6 +14781,7 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -15402,6 +15404,7 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz", "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -15457,7 +15460,6 @@ "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=18" }, @@ -15658,6 +15660,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -17124,7 +17127,6 @@ "integrity": "sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=10.18" }, @@ -17217,7 +17219,6 @@ "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==", "license": "Apache-2.0", "optional": true, - "peer": true, "engines": { "node": ">=10.0" }, @@ -17278,7 +17279,8 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/tsutils": { "version": "3.21.0", @@ -17327,6 +17329,7 @@ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", "license": "(MIT OR CC0-1.0)", + "peer": true, "engines": { "node": ">=10" }, @@ -17769,6 +17772,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz", "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -17818,7 +17822,6 @@ "integrity": "sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "colorette": "^2.0.10", "memfs": "^4.43.1", @@ -17849,7 +17852,6 @@ "integrity": "sha512-L9uC9vGuc4xFybbdOpRLoOAOq1YEBBsocCs5NVW32DfU+CZWWIn3OVF+lB8Gp4ttBVSMazwrTrjv8ussX/e3VQ==", "license": "Apache-2.0", "optional": true, - "peer": true, "dependencies": { "@jsonjoy.com/json-pack": "^1.11.0", "@jsonjoy.com/util": "^1.9.0", @@ -17869,7 +17871,6 @@ "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">= 0.6" } @@ -17880,7 +17881,6 @@ "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "mime-db": "^1.54.0" }, @@ -17894,7 +17894,6 @@ "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "@types/bonjour": "^3.5.13", "@types/connect-history-api-fallback": "^1.5.4", @@ -17953,7 +17952,6 @@ "integrity": "sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "@types/node": "*", "@types/qs": "*", @@ -17967,7 +17965,6 @@ "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=12" }, @@ -17981,7 +17978,6 @@ "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "default-browser": "^5.2.1", "define-lazy-prop": "^3.0.0", @@ -18001,7 +17997,6 @@ "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", "license": "MIT", "optional": true, - "peer": true, "engines": { "node": ">=10.0.0" }, @@ -18355,6 +18350,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -18670,7 +18666,6 @@ "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "is-wsl": "^3.1.0" }, @@ -18687,7 +18682,6 @@ "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==", "license": "MIT", "optional": true, - "peer": true, "dependencies": { "is-inside-container": "^1.0.0" }, diff --git a/client/src/App.js b/client/src/App.js index 74191df..8c9fc48 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -18,6 +18,7 @@ import MindMapEditor from "./pages/MindMapEditor"; import Profile from "./pages/Profile.js"; import SubmitFeedback from "./pages/SubmitFeedback"; import Todo from "./pages/Todo"; +import HomeNew from "./pages/HomeNew"; const App = () => { @@ -29,6 +30,7 @@ const App = () => { } /> + } /> } /> } /> } /> diff --git a/client/src/components/Navbar.css b/client/src/components/Navbar.css index c3d1341..2e9299c 100644 --- a/client/src/components/Navbar.css +++ b/client/src/components/Navbar.css @@ -65,7 +65,7 @@ html[data-theme="dark"] .navbar { .navbar-links { display: flex; align-items: center; - gap: 0.1rem; + gap: 0.25rem; list-style: none; margin: 0; padding: 0; @@ -77,30 +77,49 @@ html[data-theme="dark"] .navbar { color: var(--muted); text-decoration: none; font-weight: 500; - font-size: 0.875rem; - padding: 0.35rem 0.6rem; - border-radius: 6px; + font-size: 1.05rem; /* Increased font size for legibility */ + padding: 0.4rem 0.95rem; /* Adjusted slightly for 3px double border height parity */ + border-radius: 10px; /* Beautiful rounded rect box */ + border: 3px double transparent; /* Concentric double border layout standard */ white-space: nowrap; - transition: background 0.18s ease, color 0.18s ease; + transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), + color 0.25s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.22s ease; letter-spacing: 0.01em; } .navbar-link:hover { - background: rgba(99, 102, 241, 0.08); + background: rgba(99, 102, 241, 0.04); color: #4f46e5; + border-color: rgba(99, 102, 241, 0.16); /* Two concentric active hover lines */ + transform: translateY(-1px); } -/* Active pill highlight */ +/* Active "double border lines one after another" rounded rectangular highlight */ .navbar-link.active { - background: rgba(99, 102, 241, 0.12); - color: #4f46e5; + background: rgba(226, 232, 240, 0.45) !important; /* Soft premium grey-blue pill background */ + border-color: rgba(15, 23, 42, 0.22) !important; /* Two thin concentric border lines */ + color: #0f172a !important; /* Premium dark color text */ font-weight: 600; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } -html[data-theme="dark"] .navbar-link:hover, -html[data-theme="dark"] .navbar-link.active { - background: rgba(139, 180, 255, 0.12); +html[data-theme="dark"] .navbar-link { + color: #cbd5e1; +} + +html[data-theme="dark"] .navbar-link:hover { + background: rgba(139, 180, 255, 0.06); color: #8ab4ff; + border-color: rgba(139, 180, 255, 0.25); /* Dark mode concentric hover */ +} + +html[data-theme="dark"] .navbar-link.active { + background: rgba(255, 255, 255, 0.05) !important; /* Semi-transparent in dark theme */ + border-color: rgba(255, 255, 255, 0.22) !important; /* Two thin white concentric border lines */ + color: #ffffff !important; /* Premium bright white active text */ + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } /* ── Dropdown "More" menu ── */ @@ -114,21 +133,52 @@ html[data-theme="dark"] .navbar-link.active { gap: 0.3rem; color: var(--muted); background: none; - border: none; + border: 3px double transparent; /* Concentric double border layout standard */ font-family: inherit; font-weight: 500; - font-size: 0.875rem; - padding: 0.35rem 0.6rem; - border-radius: 6px; + font-size: 1.05rem; /* Match increased link font size */ + padding: 0.4rem 0.95rem; /* Match link padding */ + border-radius: 10px; /* Match link border-radius */ cursor: pointer; white-space: nowrap; - transition: background 0.18s ease, color 0.18s ease; + transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), + border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), + color 0.25s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.22s ease; letter-spacing: 0.01em; } .navbar-dropdown-btn:hover { - background: rgba(99, 102, 241, 0.08); + background: rgba(99, 102, 241, 0.04); color: #4f46e5; + border-color: rgba(99, 102, 241, 0.16); + transform: translateY(-1px); +} + +/* Active box highlight for More dropdown when its children routes are active */ +.navbar-dropdown-btn.active { + background: rgba(226, 232, 240, 0.45) !important; + border-color: rgba(15, 23, 42, 0.22) !important; /* Two thin concentric border lines */ + color: #0f172a !important; + font-weight: 600; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); +} + +html[data-theme="dark"] .navbar-dropdown-btn { + color: #cbd5e1; +} + +html[data-theme="dark"] .navbar-dropdown-btn:hover { + background: rgba(139, 180, 255, 0.06); + color: #8ab4ff; + border-color: rgba(139, 180, 255, 0.25); +} + +html[data-theme="dark"] .navbar-dropdown-btn.active { + background: rgba(255, 255, 255, 0.05) !important; + border-color: rgba(255, 255, 255, 0.22) !important; /* Two thin white concentric border lines */ + color: #ffffff !important; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } .navbar-dropdown-btn svg, @@ -169,11 +219,11 @@ html[data-theme="dark"] .navbar-link.active { .navbar-dropdown-menu a { display: block; - padding: 0.55rem 0.9rem; + padding: 0.6rem 1rem; border-radius: 8px; color: var(--muted); text-decoration: none; - font-size: 0.875rem; + font-size: 0.96rem; /* Increased size */ font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } @@ -235,31 +285,42 @@ html[data-theme="dark"] .navbar-theme-toggle:hover { /* ── Profile avatar ── */ .navbar-profile-link { - display: flex; + display: inline-flex; align-items: center; justify-content: center; + width: 34px; + height: 34px; border-radius: 50%; + background: var(--card, #f8fafc); + border: 1px solid var(--border, #e2e8f0); + cursor: pointer; flex-shrink: 0; - transition: transform 0.2s ease; + overflow: hidden; + transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .navbar-profile-link:hover { - transform: scale(1.08); + background: rgba(99, 102, 241, 0.08); + border-color: #4f46e5; + transform: scale(1.05); +} + +html[data-theme="dark"] .navbar-profile-link { + background: #101826; + border-color: #263243; +} + +html[data-theme="dark"] .navbar-profile-link:hover { + background: rgba(139, 180, 255, 0.12); + border-color: #8ab4ff; } .navbar-profile-img { - width: 34px; - height: 34px; + width: 100%; + height: 100%; border-radius: 50%; object-fit: cover; - border: 2px solid transparent; - background-clip: padding-box; - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0); - transition: box-shadow 0.2s ease; -} - -.navbar-profile-link:hover .navbar-profile-img { - box-shadow: 0 0 0 2px #6366f1; + display: block; } /* ── Mobile hamburger ── */ @@ -360,7 +421,8 @@ html[data-theme="dark"] .navbar-link-mobile.active { margin-top: 0.25rem; } -.navbar-mobile-controls .navbar-theme-toggle { +.navbar-mobile-controls .navbar-theme-toggle, +.navbar-mobile-controls .navbar-profile-link { width: 38px; height: 38px; } diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js index e7e4c76..f6018cc 100644 --- a/client/src/components/Navbar.js +++ b/client/src/components/Navbar.js @@ -1,13 +1,16 @@ import React, { useState, useEffect, useRef } from "react"; -import { Link, NavLink } from "react-router-dom"; +import { Link, NavLink, useLocation } from "react-router-dom"; import "./Navbar.css"; import { useTheme } from "../theme/ThemeProvider"; import { FaMoon, FaSun, FaChevronDown } from "react-icons/fa"; +const DEFAULT_AVATAR = "data:image/svg+xml;utf8,"; + const user = { - avatar: "https://avatar.iran.liara.run/public/boy", + avatar: null, // Set to null by default to showcase our beautiful default SVG profile image }; + // Primary links always visible in the bar const primaryLinks = [ { to: "/", label: "Home" }, @@ -34,6 +37,11 @@ const Navbar = () => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); + const location = useLocation(); + + const currentPath = location.pathname; + const isHomeActive = currentPath === "/" || currentPath === "/homenew"; + const isMoreActive = moreLinks.some(({ to }) => currentPath === to || currentPath.startsWith(to + "/")); const toggleMobileMenu = () => setIsMobileMenuOpen((prev) => !prev); const closeMobileMenu = () => setIsMobileMenuOpen(false); @@ -72,19 +80,19 @@ const Navbar = () => { {/* Primary nav links */}
    - {primaryLinks.map(({ to, label }) => ( -
  • - - "navbar-link" + (isActive ? " active" : "") - } - > - {label} - -
    • - ))} + {primaryLinks.map(({ to, label }) => { + const isActive = to === "/" ? isHomeActive : (currentPath === to || currentPath.startsWith(to + "/")); + return ( +
  • + + {label} + +
    • + ); + })} {/* "More" dropdown */}
  • { ref={dropdownRef} >