From 24af0c3312e73630703a8cbd90bf131c42baf4c9 Mon Sep 17 00:00:00 2001
From: Faraz Akhtar <farazakhtar019@gmail.com>
Date: Mon, 23 Feb 2026 05:30:55 +0530
Subject: [PATCH] feat(virtual-lab): add dropdown menu for Chemistry
 experiments

---
 .../templates/virtual_lab/layout.html         | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/virtual_lab/templates/virtual_lab/layout.html b/web/virtual_lab/templates/virtual_lab/layout.html
index dd8ebcdc3..a9f692dea 100644
--- a/web/virtual_lab/templates/virtual_lab/layout.html
+++ b/web/virtual_lab/templates/virtual_lab/layout.html
@@ -20,7 +20,8 @@
             <button class="hover:text-indigo-600 dark:hover:text-indigo-400 transition focus:outline-none focus:ring-2 focus:ring-indigo-500">
               {% trans "Physics" %}
             </button>
-            <div class="absolute left-0 mt-2 w-40 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto">
+            
+             <div class="absolute left-0 mt-2 w-40 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto ">      
               <a href="{% url 'virtual_lab:physics_pendulum' %}"
                  class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900 transition">{% trans "Pendulum" %}</a>
               <a href="{% url 'virtual_lab:physics_projectile' %}"
@@ -29,9 +30,25 @@
                  class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-yellow-50 dark:hover:bg-yellow-900 transition">{% trans "Inclined Plane" %}</a>
             </div>
           </div>
-          <a href="{% url 'virtual_lab:chemistry_home' %}"
-             class="hover:text-indigo-600 dark:hover:text-indigo-400 transition">{% trans "Chemistry" %}</a>
-          <a href="{% url 'virtual_lab:code_editor' %}"
+          <!-- Chemistry Dropdown -->
+          <div class="relative group inline-block">
+            <button class="hover:text-indigo-600 dark:hover:text-indigo-400 transition focus:outline-none focus:ring-2 focus:ring-indigo-500">
+              {% trans "Chemistry" %}
+            </button>
+            <div class="absolute left-0 mt-2 w-40 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto z-50">
+              <a href="{% url 'virtual_lab:titration' %}"
+                 class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-indigo-50 dark:hover:bg-indigo-900 transition">{% trans "Titration" %}</a>
+              <a href="{% url 'virtual_lab:reaction_rate' %}"
+                 class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-900 transition">{% trans "Reaction Rate" %}</a>
+              <a href="{% url 'virtual_lab:solubility' %}"
+                 class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-yellow-50 dark:hover:bg-yellow-900 transition">{% trans "Solubility" %}</a>
+              <a href="{% url 'virtual_lab:precipitation' %}"
+                 class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-purple-50 dark:hover:bg-purple-900 transition">{% trans "Precipitation" %}</a>
+              <a href="{% url 'virtual_lab:ph_indicator' %}"
+                 class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-teal-900 transition">{% trans "pH Indicator" %}</a>
+            </div>
+          </div>
+           <a href="{% url 'virtual_lab:code_editor' %}"
              class="hover:text-indigo-600 dark:hover:text-indigo-400 transition">{% trans "Code Editor" %}</a>
         </nav>
       </div>