navbar fixed at less than 799px screen width

editor.html

@@ -8,6 +8,9 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <!-- Bootstrap Icons CDN for checkmark -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+    <!-- Prism.js CSS for syntax highlighting -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" rel="stylesheet" />
+
     <style>
         /* Custom CSS Variables for the new theme */
         :root {
@@ -163,13 +166,13 @@ <h3 class="h5 mt-4 text-primary">Example:</h3>
         <!-- Center Panel: Code Editor -->
         <div id="center-panel" class="panel m-2 pb-5">
             <h2 class="h4 mb-3 text-code-heading">Code Editor</h2>
-            <textarea id="code-editor" class="form-control flex-grow-1 p-3 rounded resize-none"
-                      placeholder="Write your code here...">
+            <pre id="code-editor" class="bg-dark p-3 rounded flex-grow-1 overflow-auto"><code class="language-javascript" contenteditable="true">
 function reverseString(str) {
-  // Implement your solution here
-  return str.split('').reverse().join('');
+// Your code here
+return str.split('').reverse().join('');
 }
-            </textarea>
+            </code></pre>
+
             <button class="btn btn-custom-blue mt-4 px-4 py-2 rounded shadow">
                 Run Code
             </button>
@@ -280,5 +283,10 @@ <h2 class="h4 mb-3 text-output-heading">Output / Test Results</h2>
 
     <!-- Router Script -->
     <script type="module" src="scripts/app.js"></script>
+    <!-- Prism.js -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
+    <!-- Language support (e.g., JavaScript) -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
+
 </body>
 </html>

index.html

@@ -588,7 +588,6 @@ <h4>Community</h4>
       .search-input {
         width: 100%;
       }
-
       .challenges-list {
         grid-template-columns: 1fr;
       }

styles/challenges.css

@@ -192,4 +192,13 @@ body {
   color: var(--text-color);
   border: 1px solid var(--border-color);
   border-radius: 50%;
-}
+}
+/* Hamburger CSS */
+.hamburger {
+  display: block;
+  width: 25px;
+  height: 3px;
+  background: var(--text-color);
+  margin: 4px 0;
+  transition: 0.4s;
+}

styles/themes.css

@@ -40,4 +40,41 @@
     background-color: var(--text-color);
     color: var(--bg-color);
   }
+  /* --- NAVIGATION --- */
+
+/* Mobile-first: hide nav list */
+.nav__list {
+  display: none;
+  flex-direction: column;
+  gap: 1rem;
+  position: absolute;
+  top: 60px; /* adjust if needed */
+  right: 20px;
+  background-color: var(--card-bg);
+  padding: 1rem;
+  border-radius: 8px;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+  z-index: 10;
+}
+
+/* Show when open */
+.nav__list.open {
+  display: flex;
+}
+
+/* Desktop view */
+@media (min-width: 768px) {
+  .nav__list {
+    display: flex !important;
+    position: static;
+    flex-direction: row;
+    background: none;
+    box-shadow: none;
+  }
+
+  #navToggle {
+    display: none;
+  }
+}
+