Root Layout - Copy this React, Tailwind Component to your project

"use client"; import { useRouter } from "next/navigation"; import { useState } from "react"; import { FiChevronDown, FiChevronUp, FiGlobe, FiLogOut, FiSettings, FiUser, FiUserX, } from "react icons/fi"; import { NavigationProvider } from "./NavigationContext"; // adjust import if needed import React from "react"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { // Mobile menu state const [state, setState] = useState(false); // Dropdown state const [isDropdownOpen, setIsDropdownOpen] = useState(false); const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen); // Get stored username safely const storedUsername = typeof window !== "undefined" ? localStorage.getItem("Name") : "User"; const router = useRouter(); // Navigation data for desktop navigation const navigation: { title: string; path: string }[] = [ { title: "My Interviews", path: "/user/dashboard/interview" }, ]; // The Brand component with router navigation const Brand = () => ( <div className="flex items center justify start"> <button onClick={() => router.push("/user/dashboard")}> <img src="../../Instacks.jpg" width={120} height={50} alt="Instacks logo" /> </button> </div> ); const dropdownItems = [ { name: "Dashboard", icon: FiUser }, { name: "Billing", icon: FiSettings }, { name: "Change Password", icon: FiGlobe }, { name: "Profile", icon: FiUserX }, { name: "Logout", icon: FiLogOut }, ]; const handleLogout = () => { if (typeof window !== "undefined") { localStorage.removeItem("Authentication"); localStorage.removeItem("theme"); localStorage.removeItem("Name"); localStorage.removeItem("Role"); localStorage.setItem("theme", "light"); localStorage.clear(); } router.push("/"); }; return ( <div className="relative"> {/* Background Blur */} <div className="absolute inset 0 blur xl h [580px]" style={{ background: "linear gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)", }} ></div> <header className="relative z 10"> {/* Desktop/Tablet Header */} <div className="flex flex col md:flex row md:items center md:justify between px 4 py 5"> {/* Left side: Brand + Navigation */} <div className="flex items center justify start space x 6"> <Brand /> <ul className="flex space x 6"> {navigation.map((item, idx) => ( <li key={idx} className="text gray 700 hover:text gray 900"> <button onClick={() => router.push(item.path)} className="block focus:outline none" > {item.title} </button> </li> ))} </ul> </div> {/* Right side: Dropdown Menu */} <div className="ml 8 relative"> <button onClick={toggleDropdown} className="flex items center space x 2 p 2 rounded full hover:bg gray 100 dark:hover:bg gray 700 transition colors duration 200" aria expanded={isDropdownOpen} aria haspopup="true" > <FiUser className="h 5 w 5" /> <span className="hidden sm:block text sm font medium text gray 700 dark:text gray 300"> {storedUsername || "User"} </span> {isDropdownOpen ? ( <FiChevronUp className="h 4 w 4 text gray 700 dark:text gray 300" /> ) : ( <FiChevronDown className="h 4 w 4 text gray 700 dark:text gray 300" /> )} </button> {isDropdownOpen && ( <div className="absolute right 0 mt 2 w 48 rounded md shadow lg bg white dark:bg gray 800 ring 1 ring black ring opacity 5"> <div className="py 1" role="menu" aria orientation="vertical" aria labelledby="user menu" > {dropdownItems.map((item, index) => ( <button key={index} className="w full text left px 4 py 2 text sm text gray 700 dark:text gray 300 hover:bg gray 100 dark:hover:bg gray 700 flex items center space x 2" role="menuitem" onClick={() => { if (item.name === "Logout") { handleLogout(); } else { console.log(`${item.name} clicked`); } }} > <item.icon className="h 4 w 4" /> <span>{item.name}</span> </button> ))} </div> </div> )} </div> </div> {/* Mobile Header */} <div className="md:hidden px 4"> <Brand /> <button className="menu btn text gray 500 hover:text gray 800 mt 2" onClick={() => setState(!state)} > {state ? ( <svg xmlns="http://www.w3.org/2000/svg" className="h 6 w 6" viewBox="0 0 20 20" fill="currentColor" > <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293 4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01 1.414 1.414L10 11.414l 4.293 4.293a1 1 0 01 1.414 1.414L8.586 10 4.293 5.707a1 1 0 010 1.414z" clipRule="evenodd" /> </svg> ) : ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w 6 h 6" > <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m 16.5 5.25h16.5" /> </svg> )} </button> </div> </header> {/* Wrap page content with NavigationProvider */} <NavigationProvider>{children}</NavigationProvider> </div> ); } correct this code for web and mobile responsive