get env

.gitignore

@@ -0,0 +1 @@
+.env.local

frontend/app/Sidebar.js

@@ -1,4 +1,3 @@
-// Sidebar.js
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
@@ -9,13 +8,26 @@ export default function Sidebar({
   handleUserSelect,
   setFilteredUsers,
 }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen((prev) => !prev);
+  };
+
   const handleSearchChange = async (e) => {
     const query = e.target.value;
     setSearchQuery(query);
 
+    const servicesUrl = process.env.NEXT_PUBLIC_SERVICES_URL;
+
+    if (!servicesUrl) {
+      console.error('Environment variable NEXT_PUBLIC_SERVICES_URL is not defined.');
+      return;
+    }
+
     if (query.length > 2) {
       try {
-        const response = await fetch(`https://Hans-R-D-nexus-services.hf.space/search?query=${query}`);
+        const response = await fetch(`${servicesUrl}/search?query=${query}`);
         const data = await response.json();
         setFilteredUsers(data);
       } catch (error) {
@@ -27,28 +39,66 @@ export default function Sidebar({
   };
 
   return (
-    <div style={{ width: '250px', backgroundColor: '#333', padding: '20px' }}>
-      <h3 style={{ color: '#fff' }}>Select Recipient</h3>
-      <input
-        type="text"
-        placeholder="Search Users..."
-        value={searchQuery}
-        onChange={handleSearchChange}
-        style={searchInputStyle}
-      />
-      <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {filteredUsers.map((recipient, index) => (
-          <li key={index} style={{ color: '#fff', cursor: 'pointer' }}>
-            <span
-              style={{ textDecoration: 'none', color: '#fff' }}
-              onClick={() => handleUserSelect(recipient)}
-            >
-              {recipient}
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
+    <>
+      {/* Hamburger Menu Button */}
+      <button
+        onClick={toggleSidebar}
+        style={{
+          position: 'fixed',
+          top: '10px',
+          left: isSidebarOpen ? '210px' : '10px',
+          zIndex: 1000,
+          backgroundColor: '#4b2e83',
+          color: '#fff',
+          border: 'none',
+          borderRadius: '5px',
+          padding: '10px',
+          cursor: 'pointer',
+          transition: 'left 0.3s ease',
+        }}
+      >
+        ☰
+      </button>
+
+      {/* Sidebar */}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: isSidebarOpen ? 0 : '-260px', // Sidebar slides out of view when collapsed
+          width: '250px',
+          height: '100%',
+          backgroundColor: '#333',
+          padding: '20px',
+          boxShadow: '2px 0 5px rgba(0, 0, 0, 0.5)',
+          transition: 'left 0.3s ease',
+          zIndex: 999,
+        }}
+      >
+        <h3 style={{ color: '#fff', marginBottom: '20px' }}>Select Recipient</h3>
+
+        <input
+          type="text"
+          placeholder="Search Users..."
+          value={searchQuery}
+          onChange={handleSearchChange}
+          style={searchInputStyle}
+        />
+
+        <ul style={{ listStyleType: 'none', padding: 0 }}>
+          {filteredUsers.map((recipient, index) => (
+            <li key={index} style={{ color: '#fff', cursor: 'pointer', marginBottom: '10px' }}>
+              <span
+                style={{ textDecoration: 'none', color: '#fff' }}
+                onClick={() => handleUserSelect(recipient)}
+              >
+                {recipient}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </>
   );
 }
 

frontend/app/WebSocketContext.js

@@ -11,7 +11,14 @@ export const WebSocketProvider = ({ children }) => {
   const [status, setStatus] = useState('Disconnected');
 
   useEffect(() => {
-    const socket = new WebSocket('wss://Hans-R-D-nexus-relay.hf.space/ws');
+    const relayUrl = process.env.NEXT_PUBLIC_RELAY_URL;
+
+    if (!relayUrl) {
+      console.error('Environment variable NEXT_PUBLIC_RELAY_URL is not defined.');
+      return;
+    }
+
+    const socket = new WebSocket(relayUrl);
 
     socket.onopen = () => {
       console.log('WebSocket connection opened.');