From e288bf94f56904d56e8dd871897b267e46ddcec3 Mon Sep 17 00:00:00 2001
From: lokeshramchand-ctrl <lokeshramchand@gmail.com>
Date: Wed, 25 Jun 2025 22:51:12 +0530
Subject: [PATCH] Refresh

---
 src/components/UI/Map/OpenLayerMap.tsx | 277 +++++++++----------------
 1 file changed, 93 insertions(+), 184 deletions(-)

diff --git a/src/components/UI/Map/OpenLayerMap.tsx b/src/components/UI/Map/OpenLayerMap.tsx
index f02c4ae..57a1262 100644
--- a/src/components/UI/Map/OpenLayerMap.tsx
+++ b/src/components/UI/Map/OpenLayerMap.tsx
@@ -129,40 +129,39 @@ const OpenLayersMap = () => {
 
       <style>
         {`
-  /* Fix for black borders */
-  body, html, #root {
-    margin: 0;
-    padding: 0;
-    width: 100vw;
-    height: 100vh;
-  }
-  
-  /* Map container fixes */
-  .map-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-  }
-  
-
-  
-  /* Layer list improvements */
-  .layer-item {
-    padding: 8px 12px;
-    margin: 2px 0;
-    font-size: 13px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-  
-  .layer-item:hover {
-    background-color: #f0f0f0;
-  }
+          /* Fix for black borders */
+          body, html, #root {
+            margin: 0;
+            padding: 0;
+            width: 100vw;
+            height: 100vh;
+          }
+          
+          /* Map container fixes */
+          .map-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
+          }
+          
+          /* Layer list improvements */
+          .layer-item {
+            padding: 8px 12px;
+            margin: 2px 0;
+            font-size: 13px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+          }
+          
+          .layer-item:hover {
+            background-color: #f0f0f0;
+          }
+          
           /* Custom scrollbar */
           .custom-scrollbar::-webkit-scrollbar {
             width: 6px;
@@ -196,50 +195,21 @@ const OpenLayersMap = () => {
           /* Responsive styles */
           @media (max-width: 768px) {
             .sidebar {
-              position: absolute !important;
               width: 280px !important;
-              left: ${sidebarOpen ? '0' : '-280px'};
-              z-index: 1000;
-              transition: left 0.3s ease;
-              height: calc(100vh - 72px) !important;
-            }
-            
-            .map-container {
-              width: 100% !important;
-            }
-            
-            .nav-buttons {
-              display: none !important;
+              left: ${sidebarOpen ? '16px' : '-280px'};
+              height: calc(100vh - 96px) !important;
+              top: 80px;
             }
             
             .mobile-menu-btn {
               display: block !important;
             }
-            
-            .header-content {
-              padding: 0 16px !important;
-            }
-            
-            .search-container {
-              padding: 16px !important;
-            }
           }
           
           @media (max-width: 480px) {
-            .header-title {
-              font-size: 18px !important;
-            }
-            
             .sidebar {
               width: 260px !important;
-              left: ${sidebarOpen ? '0' : '-260px'};
-            }
-            
-            .coordinate-display {
-              bottom: 16px !important;
-              left: 16px !important;
-              right: 16px !important;
-              width: auto !important;
+              left: ${sidebarOpen ? '8px' : '-260px'};
             }
           }
         `}
@@ -247,72 +217,29 @@ const OpenLayersMap = () => {
 
       {/* Header */}
       <header style={{
-        backgroundColor: '#ffffff',
-        borderBottom: '1px solid #e9ecef',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
+        backgroundColor: 'transparent',
+        borderBottom: 'none',
+        boxShadow: 'none',
         padding: '0 32px',
         height: '72px',
         minHeight: '72px',
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'space-between',
+        justifyContent: 'center',
         position: 'relative',
         zIndex: 1000,
         flexShrink: 0
       }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '12px'
-        }}>
-          {/* Mobile menu button - hidden on desktop */}
-          <button
-            className="mobile-menu-btn"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            style={{
-              display: 'none',
-              background: 'none',
-              border: 'none',
-              fontSize: '20px',
-              cursor: 'pointer',
-              padding: '8px',
-              color: '#2c3e50'
-            }}
-          >
-            ☰
-          </button>
-
-          <div style={{
-            width: '40px',
-            height: '40px',
-            background: 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)',
-            borderRadius: '12px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: '0 4px 12px rgba(44, 62, 80, 0.15)'
-          }}>
-            <span style={{
-              color: 'white',
-              fontSize: '18px',
-              fontWeight: '700'
-            }}>M</span>
-          </div>
-          <span className="header-title" style={{
-            fontSize: '24px',
-            fontWeight: '600',
-            color: '#2c3e50',
-            letterSpacing: '-0.5px'
-          }}>
-            MapExplorer
-          </span>
-        </div>
-
-        {/* Navigation - hidden on mobile */}
+        {/* Navigation - centered with white container */}
         <nav className="nav-buttons" style={{
           display: 'flex',
           alignItems: 'center',
-          gap: '8px'
+          gap: '8px',
+          backgroundColor: '#ffffff',
+          borderRadius: '60px',
+          padding: '8px',
+          boxShadow: '0 2px 12px rgba(0, 0, 0, 0.08)',
+          border: '1px solid #e9ecef'
         }}>
           {['Home', 'Map', 'About', 'Contact'].map((item, index) => (
             <button
@@ -322,7 +249,7 @@ const OpenLayersMap = () => {
                 backgroundColor: index === 1 ? '#2c3e50' : 'transparent',
                 color: index === 1 ? 'white' : '#495057',
                 border: 'none',
-                borderRadius: '12px',
+                borderRadius: '60px',
                 fontSize: '14px',
                 fontWeight: '500',
                 cursor: 'pointer',
@@ -334,62 +261,56 @@ const OpenLayersMap = () => {
             </button>
           ))}
         </nav>
-
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '16px'
-        }}>
-          <button style={{
-            padding: '10px',
-            backgroundColor: '#f8f9fa',
-            border: 'none',
-            borderRadius: '10px',
-            cursor: 'pointer',
-            color: '#6c757d',
-            fontSize: '16px',
-            transition: 'all 0.3s ease',
-          }}>
-            🔔
-          </button>
-          <div style={{
-            width: '36px',
-            height: '36px',
-            background: 'linear-gradient(135deg, #6c757d 0%, #8b949e 100%)',
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'white',
-            fontSize: '14px',
-            fontWeight: '600',
-            cursor: 'pointer',
-            boxShadow: '0 3px 8px rgba(108, 117, 125, 0.15)',
-          }}>
-            U
-          </div>
-        </div>
       </header>
 
       {/* Main Content */}
       <div style={{
-        display: 'flex',
+        position: 'relative',
         height: 'calc(100vh - 72px)',
         width: '100vw',
-        overflow: 'hidden',
-        position: 'relative'
+        overflow: 'hidden'
       }}>
-        {/* Sidebar with responsive behavior */}
+        {/* Floating Sidebar */}
         <div className="sidebar custom-scrollbar" style={{
+          position: 'absolute',
+          top: '24px',
+          left: '24px',
           width: '360px',
+          height: 'calc(100vh - 120px)',
           backgroundColor: '#ffffff',
-          borderRight: '1px solid #e9ecef',
+          borderRadius: '24px',
           padding: '24px',
           overflowY: 'auto',
           overflowX: 'hidden',
-          boxShadow: '4px 0 16px rgba(0,0,0,0.06)',
-          flexShrink: 0
+          boxShadow: '0 12px 32px rgba(0,0,0,0.12)',
+          zIndex: 100,
+          border: '1px solid rgba(0,0,0,0.08)',
+          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+          transform: sidebarOpen ? 'translateX(0)' : 'translateX(-400px)'
         }}>
+          {/* Sidebar toggle button */}
+          <button 
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            style={{
+              position: 'absolute',
+              right: '-48px',
+              top: '24px',
+              width: '40px',
+              height: '40px',
+              backgroundColor: '#ffffff',
+              border: '1px solid #e9ecef',
+              borderRadius: '50%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              cursor: 'pointer',
+              boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
+              zIndex: 101
+            }}
+          >
+            {sidebarOpen ? '❮' : '❯'}
+          </button>
+
           <div style={{
             display: 'flex',
             alignItems: 'center',
@@ -435,6 +356,7 @@ const OpenLayersMap = () => {
                   borderRadius: '12px',
                   marginBottom: '12px',
                   fontSize: '14px',
+                  color: '#000000',
                   fontFamily: "'Poppins', sans-serif",
                   backgroundColor: 'white',
                   boxShadow: '0 2px 4px rgba(0,0,0,0.04)',
@@ -587,34 +509,21 @@ const OpenLayersMap = () => {
 
         {/* Map Container */}
         <div className="map-container" style={{
-          flex: 1,
-          position: 'relative',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
           backgroundColor: '#ffffff',
+          zIndex: 1,
         }}>
-          {/* Overlay for mobile when sidebar is open */}
-          {isMobile && sidebarOpen && (
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'rgba(0,0,0,0.5)',
-                zIndex: 999,
-                transition: 'opacity 0.3s ease'
-              }}
-              onClick={() => setSidebarOpen(false)}
-            />
-          )}
-
           <div ref={mapDivRef} style={{
             width: '100%',
             height: '100%',
             borderRadius: '0',
             overflow: 'hidden'
           }} />
-
+          
           {/* Coordinate Display */}
           {clickedCoordinate && (
             <div className="coordinate-display" style={{