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

// frontend/src/SettingsLayout.js import React, { useState } from 'react' import Navbar from './components/Navbar' // Existing Navbar component import { Link, useLocation } from 'react router dom' import { FaBars, FaTimes } from 'react icons/fa' // Importing React Icons const SettingsLayout = ({ children }) => { const currentYear = new Date().getFullYear() // Dynamic year for footer const location = useLocation() // To determine active route const [isSidebarOpen, setIsSidebarOpen] = useState(false) // State to control mobile sidebar // Sidebar links const sidebarLinks = [ { path: '/user settings/user info', label: 'User Information' }, { path: '/user settings/account status', label: 'Account Status' }, { path: '/user settings/search criteria', label: 'Search Criteria and Project Monitor Settings', }, { path: '/user settings/line api', label: 'Line Messaging API Integration', }, { path: '/user settings/notification settings', label: 'Notification Settings', }, { path: '/user settings/security settings', label: 'Security Settings' }, { path: '/user settings/language settings', label: 'Language Settings' }, { path: '/user settings/payment settings', label: 'Payment Settings' }, { path: '/user settings/advanced features', label: 'Advanced Features' }, { path: '/user settings/pricing', label: 'User Pricing' }, ] return ( <div className='flex flex col min h screen'> {/* Navbar */} <Navbar> {/* Mobile Sidebar Toggle Button */} <button aria label='Open sidebar' className='md:hidden text white focus:outline none' onClick={() => setIsSidebarOpen(true)} > <FaBars className='h 6 w 6' /> </button> </Navbar> {/* Main Content Area */} <div className='flex flex 1 overflow hidden'> {/* Sidebar for Desktop */} <aside className='hidden md:block w 64 bg [#003366] text white p 4 overflow y auto flex shrink 0' style={{ boxShadow: '4px 0 8px rgba(0, 0, 0, 0.1)', height: '87vh', // Set sidebar height to 87% of viewport height }} > <h2 className='text xl font bold mb 6 text center'>User Settings</h2> <ul className='space y 4'> {sidebarLinks.map((link) => ( <li key={link.path}> <Link to={link.path} className={`flex items center gap 3 px 4 py 3 rounded lg transition all duration 200 hover:bg [#FFC107] hover:text [#003366] ${ location.pathname === link.path ? 'bg [#FFC107] text [#003366] shadow md' : '' }`} > <span>{link.label}</span> </Link> </li> ))} </ul> </aside> {/* Mobile Sidebar Overlay */} {isSidebarOpen && ( <div className='fixed inset 0 z 40 flex'> {/* Overlay */} <div className='fixed inset 0 bg black bg opacity 50 transition opacity duration 300' onClick={() => setIsSidebarOpen(false)} ></div> {/* Sidebar */} <aside className='bg [#003366] text white fixed top 0 left 0 z 40 w 64 h screen pt 20 transition transform translate x full border r border gray 200 sm:translate x 0 duration 300' style={{ boxShadow: '4px 0 8px rgba(0, 0, 0, 0.1)', height: '87vh', // Set sidebar height to 87% of viewport height transform: isSidebarOpen ? 'translateX(0)' : ' translateX full', }} > <div className='h full px 3 pb 4 overflow y auto bg white dark:bg gray 800'> {/* Close Button */} <button aria label='Close sidebar' className='absolute top 4 right 4 text white focus:outline none' onClick={() => setIsSidebarOpen(false)} > <FaTimes className='h 6 w 6' /> </button> <h2 className='text xl font bold mb 6 text center'> User Settings </h2> <ul className='space y 4'> {sidebarLinks.map((link) => ( <li key={link.path}> <Link to={link.path} className={`flex items center gap 3 px 4 py 3 rounded lg transition all duration 200 hover:bg [#FFC107] hover:text [#003366] ${ location.pathname === link.path ? 'bg [#FFC107] text [#003366] shadow md' : '' }`} onClick={() => setIsSidebarOpen(false)} // Close sidebar on link click > <span>{link.label}</span> </Link> </li> ))} </ul> </div> </aside> </div> )} {/* Main Content */} <main className='flex 1 p 6 bg gray 100 overflow y auto'> <div class='p 4 sm:ml 64'> <div class='p 4 border 2 border gray 200 border dashed rounded lg dark:border gray 700 mt 14'> {children || ( <h1 className='text 2xl'>Select a setting to view</h1> )} {/* Footer */} <footer className='flex shrink 0 text center py 4 bg gray 200 text gray 600'> © {currentYear} EG PRO. All rights reserved. </footer> </div> </div> </main> </div> </div> ) } export default SettingsLayout