feat: style version dropdown

src/app/components/NavBar.module.css

@@ -19,4 +19,37 @@
   text-decoration: none;
   color: #64adac;
   font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.dropdownMenu {
+  position: absolute;
+  display: none;
+}
+
+.dropdownMenuOpen {
+  position: absolute;
+  display: block;
+  top: 3.25rem;
+  right: 11.75rem;
+  padding: 0.5rem 2rem;
+  z-index: 100;
+  box-shadow: 0 0 2px 0.2px #05254a;
+  border-radius: 0.25rem;
+  background-color: #0b3766;
+}
+
+.dropdownMenuOpen::before {
+  content: "";
+  position: absolute;
+  top: -1rem;
+  left: 3.75rem;
+  border: 0.5rem solid transparent;
+  border-bottom: 0.5rem solid #0b3766;
+}
+
+.chevron {
+  margin-left: 0.5rem;
 }

src/app/components/NavBar.tsx

@@ -1,13 +1,98 @@
+'use client';
+
 import Link from 'next/link.js';
+import { useState } from 'react';
 import styles from './NavBar.module.css';
 
+function NavbarDropdown() {
+  const versions = ['Version 1', 'Version 2'];
+
+  const [isDropdownOpen, setIsDropdownOpen] =
+    useState<boolean>(false);
+
+  const [version, setVersion] =
+    useState<string>('Version 2');
+
+  const handleDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  return (
+    <>
+      <a
+        className={styles.navLink}
+        onClick={handleDropdownToggle}
+      >
+        {version}{' '}
+        {isDropdownOpen ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className={styles.chevron}
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
+            />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            className={styles.chevron}
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        )}
+      </a>
+      <div
+        className={
+          isDropdownOpen
+            ? styles.dropdownMenuOpen
+            : styles.dropdownMenu
+        }
+      >
+        {versions
+          .filter(v => v !== version)
+          .map(v => (
+            <a
+              key={v}
+              className={styles.navLink}
+              onClick={() => {
+                setVersion(v);
+                setIsDropdownOpen(false);
+              }}
+            >
+              {v}
+            </a>
+          ))}
+      </div>
+    </>
+  );
+}
+
 export default function NavBar() {
   return (
     <nav className={styles.nav}>
       <ul className={styles.navList}>
         <li className={styles.navItem}>
-          <Link href="/docs" className={styles.navLink}>
-            Docs
+          <NavbarDropdown />
+        </li>
+        <li className={styles.navItem}>
+          <Link
+            href="https://api.onspring.com/swagger"
+            className={styles.navLink}
+          >
+            Swagger
           </Link>
         </li>
         <li className={styles.navItem}>