Basic settings panel

src/app/chat/page.tsx

@@ -5,6 +5,9 @@ import NotConnected from "@/components/sections/NotConnected";
 import StartChatting from "@/components/sections/StartChatting";
 import WaitingForChat from "@/components/sections/WaitingForChat";
 import { useChatSocket } from "@/hooks/useChatSocket";
+import Link from "next/link";
+import Image from "next/image";
+import SettingsDropdown from "@/components/layout/SettingsDropdown";
 
 export default function ChatPage() {
 
@@ -35,7 +38,18 @@ export default function ChatPage() {
     } else { // if connected to server and username is set
       if (!isWaiting) {
         if (!partner) { // if user hasn't allowed to find matches
-          content = <StartChatting name={user} onConnect={findPartner} />;
+          content = (<>
+            <nav className="w-full h-24 fixed top-0 left-0 z-[99]">
+                <div className="max-w-[90vw] m-auto h-full flex justify-between items-center">
+                    <Link href="/">
+                        <Image className="w-[5em] h-auto" src="/logo.png" width="200" height="200" alt="purrr logo"/>
+                    </Link>
+                    <SettingsDropdown setUserName={setUserName}  />
+                </div>
+            </nav>
+            <StartChatting name={user} onConnect={findPartner} />
+          </>
+          );
         } else { // if matches found
           content = <Chat partner={partner}
                           onMessage={sendMessage} messages={messages}

src/assets/icons/settings.tsx

@@ -0,0 +1,7 @@
+export default function Settings({ width = "24" }) {
+  return (
+    <svg width={width} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12.0122 2.25C12.7462 2.25846 13.4773 2.34326 14.1937 2.50304C14.5064 2.57279 14.7403 2.83351 14.7758 3.15196L14.946 4.67881C15.0231 5.37986 15.615 5.91084 16.3206 5.91158C16.5103 5.91188 16.6979 5.87238 16.8732 5.79483L18.2738 5.17956C18.5651 5.05159 18.9055 5.12136 19.1229 5.35362C20.1351 6.43464 20.8889 7.73115 21.3277 9.14558C21.4223 9.45058 21.3134 9.78203 21.0564 9.9715L19.8149 10.8866C19.4607 11.1468 19.2516 11.56 19.2516 11.9995C19.2516 12.4389 19.4607 12.8521 19.8157 13.1129L21.0582 14.0283C21.3153 14.2177 21.4243 14.5492 21.3297 14.8543C20.8911 16.2685 20.1377 17.5649 19.1261 18.6461C18.9089 18.8783 18.5688 18.9483 18.2775 18.8206L16.8712 18.2045C16.4688 18.0284 16.0068 18.0542 15.6265 18.274C15.2463 18.4937 14.9933 18.8812 14.945 19.3177L14.7759 20.8444C14.741 21.1592 14.5122 21.4182 14.204 21.4915C12.7556 21.8361 11.2465 21.8361 9.79803 21.4915C9.48991 21.4182 9.26105 21.1592 9.22618 20.8444L9.05736 19.32C9.00777 18.8843 8.75434 18.498 8.37442 18.279C7.99451 18.06 7.5332 18.0343 7.1322 18.2094L5.72557 18.8256C5.43422 18.9533 5.09403 18.8833 4.87678 18.6509C3.86462 17.5685 3.11119 16.2705 2.6732 14.8548C2.57886 14.5499 2.68786 14.2186 2.94485 14.0293L4.18818 13.1133C4.54232 12.8531 4.75147 12.4399 4.75147 12.0005C4.75147 11.561 4.54232 11.1478 4.18771 10.8873L2.94516 9.97285C2.6878 9.78345 2.5787 9.45178 2.67337 9.14658C3.11212 7.73215 3.86594 6.43564 4.87813 5.35462C5.09559 5.12236 5.43594 5.05259 5.72724 5.18056L7.12762 5.79572C7.53056 5.97256 7.9938 5.94585 8.37577 5.72269C8.75609 5.50209 9.00929 5.11422 9.05817 4.67764L9.22824 3.15196C9.26376 2.83335 9.49786 2.57254 9.8108 2.50294C10.5281 2.34342 11.26 2.25865 12.0122 2.25ZM11.9997 8.99995C10.3428 8.99995 8.9997 10.3431 8.9997 12C8.9997 13.6568 10.3428 15 11.9997 15C13.6565 15 14.9997 13.6568 14.9997 12C14.9997 10.3431 13.6565 8.99995 11.9997 8.99995Z" className="fill-foreground" />
+    </svg>
+  )
+}

src/components/layout/SettingsDropdown.tsx

@@ -0,0 +1,93 @@
+import { useRef, useState } from "react";
+import SettingsIcon from '@/assets/icons/settings';
+
+type SettingsDropdownProps = {
+  setUserName: (name: string) => void
+}
+
+const SettingsDropdown = ({ setUserName }: SettingsDropdownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const [newUsername, setNewUsername] = useState('');
+
+  const handleUsernameChange = () => {
+    setUserName(newUsername);
+    setNewUsername('');
+  }
+
+  const handleLogout = () => {
+    alert('Logout not implemented yet')
+  }
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center space-x-2 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        <SettingsIcon />
+        <span>Settings</span>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-72 rounded-lg shadow-xl z-50 transition-all duration-300 transform origin-top-right">
+          <div className="p-4 space-y-4">
+            <div className="space-y-2">
+              <div className="space-y-2">
+                <input
+                  type="text"
+                  value={newUsername}
+                  onChange={(e) => setNewUsername(e.target.value)}
+                  placeholder="Enter new username"
+                  className="w-full px-3 py-2 bg-inherit border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
+                  aria-label="New username input"
+                />
+                <button
+                  onClick={handleUsernameChange}
+                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-blue-500 rounded-md hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
+                >
+                  <span>Save Username</span>
+                </button>
+              </div>
+            </div>
+
+            <div className="border-t pt-2">
+              {!showLogoutConfirm ? (
+                <button
+                  onClick={() => setShowLogoutConfirm(true)}
+                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 text-red-500 hover:bg-red-200 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-400"
+                >
+                  <span>Logout</span>
+                </button>
+              ) : (
+                <div className="space-y-2">
+                  <p className="text-sm text-center text-gray-600">Are you sure you want to logout?</p>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={handleLogout}
+                      className="flex-1 px-4 py-2 bg-red-500 rounded-md hover:bg-red-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-400"
+                    >
+                      Confirm
+                    </button>
+                    <button
+                      onClick={() => setShowLogoutConfirm(false)}
+                      className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SettingsDropdown;