refactor json header, footer, home and styling ui

app/components/layout/Header/Header.tsx

@@ -1,14 +1,36 @@
+'use client';
+
+import { useState } from 'react';
 import HeaderTop from './HeaderTop';
 import HeaderBottom from './HeaderBottom';
+import Offcanvas from './Offcanvas';
 
 const Header = () => {
+    const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
+    const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+    const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
+    const toggleSearch = () => setIsSearchOpen(!isSearchOpen);
+
     return (
         <>
             <HeaderTop />
-            <HeaderBottom />
-            {/* Search Popup - kept here for now as part of header logic/structure */}
-            <div className="search-popup">
-                <div className="search-popup__overlay search-toggler"></div>
+            <HeaderBottom 
+                onToggleOffcanvas={toggleOffcanvas} 
+                onToggleSearch={toggleSearch} 
+            />
+            
+            <Offcanvas 
+                isOpen={isOffcanvasOpen} 
+                onClose={() => setIsOffcanvasOpen(false)} 
+            />
+
+            {/* Search Popup */}
+            <div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
+                <div 
+                    className="search-popup__overlay search-toggler" 
+                    onClick={() => setIsSearchOpen(false)}
+                ></div>
                 <div className="search-popup__content">
                     <form role="search" method="get" className="search-popup__form" action="#">
                         <input type="text" id="search" name="search" placeholder="Search Here..." />