From ecadf03d0ad99795ab2dd87112db35fe83a48046 Mon Sep 17 00:00:00 2001
From: Adam Iannazzone <46025473+jiannazzone@users.noreply.github.com>
Date: Wed, 24 Apr 2024 10:52:30 -0400
Subject: [PATCH] Sidebar now changes to tabs on mobile

---
 css/style.css       |  4 ++--
 features.html       | 27 ++++++++++-----------------
 scripts/features.js |  4 ++--
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4f61b1f..06610b8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -69,7 +69,7 @@ footer {
     background: #333;
 }
 
-.row.feature-list-item {
+.feature-list-item {
     padding: 0.5rem;
     cursor: pointer;
     background: #333;
@@ -85,5 +85,5 @@ footer {
 }
 
 #active-feature-detail {
-    display: inherit;
+    display: block;
 } 
\ No newline at end of file
diff --git a/features.html b/features.html
index f4a48ec..004c118 100644
--- a/features.html
+++ b/features.html
@@ -133,6 +133,7 @@
                 <!-- Theme based on https://github.com/anthonycaccese/art-book-next-es-de-->
 
                 <div class="row">
+
                     <!-- Left Column -->
                     <div class="col-md-4" id="left-feature-column">
 
@@ -144,27 +145,19 @@
                         </div>
 
                         <!-- Feature List -->
-                        <div class="h5" id="feature-list">
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0"
+                        <div class="h5 row d-flex flex-md-column align-items-center" id="feature-list">
+                            <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0"
                                 id="active-feature-item">
-                                <div class="col">
-                                    Pick Up and Play
-                                </div>
+                                Pick Up and Play
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
-                                <div class="col">
-                                    Quick Resume
-                                </div>
+                            <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
+                                Quick Resume
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
-                                <div class="col">
-                                    Rewind & Fast Forward
-                                </div>
+                            <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
+                                Rewind & Fast Forward
                             </div>
-                            <div class="row feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
-                                <div class="col">
-                                    Configurator
-                                </div>
+                            <div class="col feature-list-item gradient-spin my-gradient rounded-3 m-0" id="">
+                                Configurator
                             </div>
                         </div>
                     </div>
diff --git a/scripts/features.js b/scripts/features.js
index 8c17366..fe791a5 100644
--- a/scripts/features.js
+++ b/scripts/features.js
@@ -11,7 +11,7 @@ for (let i = 0; i < featureTitles.length; i++) {
 
     // We need to remove the gradient so that linearBackground is hidden
     if (featureTitles[i].id != 'active-feature-item') {
-        featureTitles[i].className = 'row feature-list-item rounded-3 m-0';
+        featureTitles[i].className = 'col feature-list-item rounded-3 m-0';
     }
 }
 
@@ -26,7 +26,7 @@ function updateActiveFeature(i) {
 
     // Reset previous current feature
     featureTitles[lastCurrentFeature].removeAttribute('id');
-    featureTitles[lastCurrentFeature].className = 'row feature-list-item rounded-3 m-0';
+    featureTitles[lastCurrentFeature].className = 'col feature-list-item rounded-3 m-0';
     featureTitles[lastCurrentFeature].style = '';
     featureDetails[lastCurrentFeature].removeAttribute('id');