From 19e9b217d04b4c41d91443526ebf3fef6a86cb13 Mon Sep 17 00:00:00 2001 From: Deepanshu Date: Fri, 18 Oct 2024 01:35:04 +0530 Subject: [PATCH] Navbar: Fixed at the top + responsive for mobile. -> Fixed the Navbar at the top of the page which makes the user to navigate through pages easily. -> Mobile UI of the navigation bar has been fixed. -> Animations for the closing and opening of the navigation bar. -> Proper comments added. --- package-lock.json | 138 +++++++++++++++++++++++++++++++---- package.json | 4 +- src/app/about/page.jsx | 2 +- src/app/daily-quote/page.jsx | 2 +- src/app/layout.jsx | 11 ++- src/components/Navbar.js | 87 ++++++++++++++++------ 6 files changed, 201 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5732b58..77e8ff2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "dependencies": { "@clerk/clerk-sdk-node": "^5.0.48", - "@clerk/nextjs": "^5.7.1", + "@clerk/nextjs": "^5.7.5", "@prisma/client": "^5.20.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", @@ -84,12 +84,13 @@ "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" }, "node_modules/@clerk/clerk-react": { - "version": "5.11.0", - "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.11.0.tgz", - "integrity": "sha512-JPvDxSPMV1Rrnh5k1ULxeemvUW+F5YdVUQAUhPPl/iZ6MHO6vXr5jn66xe0hM+wrw/snGlsrD9ePyy6tK8EDKw==", + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.12.0.tgz", + "integrity": "sha512-3Lr2QazCm5R6ZLbu7wM+d5YwCElrAoX00OBWcKqjPYaWDJCCmEYN6LJbLzOTYQ8QT1J1ZIed85/lKa+q2aD1aA==", + "license": "MIT", "dependencies": { - "@clerk/shared": "2.9.0", - "@clerk/types": "4.25.0", + "@clerk/shared": "2.9.2", + "@clerk/types": "4.26.0", "tslib": "2.4.1" }, "engines": { @@ -100,10 +101,52 @@ "react-dom": ">=18 || >=19.0.0-beta" } }, + "node_modules/@clerk/clerk-react/node_modules/@clerk/shared": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.9.2.tgz", + "integrity": "sha512-vRMDj13Pv9n8Pf+f8P40AvqJ8QEq348qUxUVIf17vn9R3/toicrQOY/Q6qsrAS8KXY9+ZnyTafJa+VFK+6iEFA==", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "@clerk/types": "4.26.0", + "glob-to-regexp": "0.4.1", + "js-cookie": "3.0.5", + "std-env": "^3.7.0", + "swr": "^2.2.0" + }, + "engines": { + "node": ">=18.17.0" + }, + "peerDependencies": { + "react": ">=18 || >=19.0.0-beta", + "react-dom": ">=18 || >=19.0.0-beta" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/@clerk/clerk-react/node_modules/@clerk/types": { + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.26.0.tgz", + "integrity": "sha512-VGcrQz/XpCiGbpIIzKVwWw4nLorzKnIP1IAemj1xt/80ULcdEZCncwhas6PoYBBsl1W55A1SwP9B/pEs0nmkCw==", + "license": "MIT", + "dependencies": { + "csstype": "3.1.1" + }, + "engines": { + "node": ">=18.17.0" + } + }, "node_modules/@clerk/clerk-react/node_modules/tslib": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", - "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" + "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==", + "license": "0BSD" }, "node_modules/@clerk/clerk-sdk-node": { "version": "5.0.48", @@ -125,14 +168,15 @@ "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==" }, "node_modules/@clerk/nextjs": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-5.7.1.tgz", - "integrity": "sha512-UqgW8iy6oXg3M/U7lE6V3sBlb5akF2HLanziOIY8YGL0DvJEG0MWb6KWAzaeezqeL0drdY63QfEAiYZZx3iq8w==", + "version": "5.7.5", + "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-5.7.5.tgz", + "integrity": "sha512-hfH4IiKcDT9LlqSOlNHZoYfX6iF4lBqPXf/KwnILCX/0+MVYaotb30FwWXkcHI2jZgcvumlQTOq8Gv5KugnihA==", + "license": "MIT", "dependencies": { - "@clerk/backend": "1.13.8", - "@clerk/clerk-react": "5.11.0", - "@clerk/shared": "2.9.0", - "@clerk/types": "4.25.0", + "@clerk/backend": "1.14.1", + "@clerk/clerk-react": "5.12.0", + "@clerk/shared": "2.9.2", + "@clerk/types": "4.26.0", "crypto-js": "4.2.0", "server-only": "0.0.1", "tslib": "2.4.1" @@ -146,6 +190,72 @@ "react-dom": ">=18 || >=19.0.0-beta" } }, + "node_modules/@clerk/nextjs/node_modules/@clerk/backend": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-1.14.1.tgz", + "integrity": "sha512-YlKMpiVo4UITw3sgA+9QrAFRILVOz5hgB1Zw180Y2LEZ5a+MdpX668vJKGh7riSweMN7JQvU2jlsKGRO+1bXDw==", + "license": "MIT", + "dependencies": { + "@clerk/shared": "2.9.2", + "@clerk/types": "4.26.0", + "cookie": "0.7.0", + "snakecase-keys": "5.4.4", + "tslib": "2.4.1" + }, + "engines": { + "node": ">=18.17.0" + } + }, + "node_modules/@clerk/nextjs/node_modules/@clerk/shared": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.9.2.tgz", + "integrity": "sha512-vRMDj13Pv9n8Pf+f8P40AvqJ8QEq348qUxUVIf17vn9R3/toicrQOY/Q6qsrAS8KXY9+ZnyTafJa+VFK+6iEFA==", + "hasInstallScript": true, + "license": "MIT", + "dependencies": { + "@clerk/types": "4.26.0", + "glob-to-regexp": "0.4.1", + "js-cookie": "3.0.5", + "std-env": "^3.7.0", + "swr": "^2.2.0" + }, + "engines": { + "node": ">=18.17.0" + }, + "peerDependencies": { + "react": ">=18 || >=19.0.0-beta", + "react-dom": ">=18 || >=19.0.0-beta" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/@clerk/nextjs/node_modules/@clerk/types": { + "version": "4.26.0", + "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.26.0.tgz", + "integrity": "sha512-VGcrQz/XpCiGbpIIzKVwWw4nLorzKnIP1IAemj1xt/80ULcdEZCncwhas6PoYBBsl1W55A1SwP9B/pEs0nmkCw==", + "license": "MIT", + "dependencies": { + "csstype": "3.1.1" + }, + "engines": { + "node": ">=18.17.0" + } + }, + "node_modules/@clerk/nextjs/node_modules/cookie": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.0.tgz", + "integrity": "sha512-qCf+V4dtlNhSRXGAZatc1TasyFO6GjohcOul807YOb5ik3+kQSnb4d7iajeCL8QHaJ4uZEjCgiCJerKXwdRVlQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/@clerk/nextjs/node_modules/tslib": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz", diff --git a/package.json b/package.json index 58ea168..8d962d8 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@clerk/clerk-sdk-node": "^5.0.48", - "@clerk/nextjs": "^5.7.1", + "@clerk/nextjs": "^5.7.5", "@prisma/client": "^5.20.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.0", @@ -62,4 +62,4 @@ "prettier --write" ] } -} \ No newline at end of file +} diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx index 0fb110d..19d91d9 100644 --- a/src/app/about/page.jsx +++ b/src/app/about/page.jsx @@ -60,7 +60,7 @@ const About = () => { return (
-
+

Meet DearDiary, your space for life's moments diff --git a/src/app/daily-quote/page.jsx b/src/app/daily-quote/page.jsx index a7c46f7..cb636d2 100644 --- a/src/app/daily-quote/page.jsx +++ b/src/app/daily-quote/page.jsx @@ -35,7 +35,7 @@ export default function DailyQuote() { return (
-
+

Daily Quotes to Inspire You diff --git a/src/app/layout.jsx b/src/app/layout.jsx index ad7a2e4..229b5cd 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -32,8 +32,8 @@ export default function RootLayout({ children }) { -
-
+
+
@@ -45,8 +45,11 @@ export default function RootLayout({ children }) {
- {children} -