Feature: Top progress bar feature added.

app/components/TopProgressBar.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { AppProgressBar as ProgressBar } from 'next-nprogress-bar'
+import React from 'react'
+
+const TopProgressBar = () => {
+  return (
+    <>
+      <ProgressBar height="2px" color="#1B4DFF" options={{ showSpinner: false }} />
+    </>
+  )
+}
+
+export default TopProgressBar

app/layout.tsx

@@ -5,6 +5,7 @@ import { Inter } from 'next/font/google'
 import { ReactNode } from 'react'
 import Navbar from './components/Navbar'
 import Footer from './components/Footer'
+import TopProgressBar from './components/TopProgressBar'
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
 
@@ -21,6 +22,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         <Navbar />
         <main className="relative pt-20">{children}</main>
         <Footer />
+        <TopProgressBar />
       </body>
     </html>
   )

package.json

@@ -84,6 +84,7 @@
     "typescript": "^5.3.3"
   },
   "devDependencies": {
+    "next-nprogress-bar": "^2.1.2",
     "@babel/core": "^7.23.6",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",