feature/Use stimulus to display tabs

Author: LewisYoul

app/assets/stylesheets/tabs.scss

@@ -0,0 +1,33 @@
+.tabs {
+  &--headers{
+    &-container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    &-wrapper {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+
+  &--header {
+    padding: 16px;
+    border-radius: 2px;
+    border-bottom: 1px solid lightgray;
+
+    &:hover {
+      cursor: pointer;
+      background-color: #DEF2F1;
+    }
+
+    &-active {
+      @extend .tabs--header;
+
+      // text-decoration: underline;
+      // text-decoration-color: #3AAFA9;
+      border-bottom: 2px solid #3AAFA9;
+    }
+  }
+}

app/javascript/controllers/tabs-controller.js

@@ -0,0 +1,23 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['tab', 'panel'];
+
+  change(event) {
+    this.markTabAsActive(event)
+    this.displayPanel(event)
+  }
+
+  markTabAsActive() {
+    this.tabTargets.forEach(tab => tab.classList.remove('tabs--header-active'))
+    event.currentTarget.classList.add('tabs--header-active')
+  }
+
+  displayPanel() {
+    const index = this.tabTargets.indexOf(event.currentTarget)
+    const activePanel = this.panelTargets[index]
+
+    this.panelTargets.forEach(tab => tab.classList.add('hidden'))
+    activePanel.classList.remove('hidden')
+  }
+}

app/javascript/tabs.vue

@@ -40,39 +40,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-  .tabs {
-    &--headers{
-      &-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-
-      &-wrapper {
-        display: flex;
-        flex-direction: row;
-      }
-    }
-
-    &--header {
-      padding: 16px;
-      border-radius: 2px;
-      border-bottom: 1px solid lightgray;
-
-      &:hover {
-        cursor: pointer;
-        background-color: #DEF2F1;
-      }
-
-      &-active {
-        @extend .tabs--header;
-
-        // text-decoration: underline;
-        // text-decoration-color: #3AAFA9;
-        border-bottom: 2px solid #3AAFA9;
-      }
-    }
-  }
-</style>

app/views/users/show.html.erb

@@ -5,17 +5,33 @@
   />
 </card>
 
-<%# <card> %>
-  <tabs>
-    <tab name="<%= @user.snippets_count %> Snippets" selected="true">
+<div data-controller="tabs">
+  <div class="tabs--headers-container">
+    <div></div>
+    <div class="tabs--headers-wrapper">
+      <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header tabs--header-active">
+        <span><%= @user.snippets.size %> Snippets</span>
+      </div>
+      <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header">
+        <span><%= @followers.size %> Followers</span>
+      </div>
+      <div data-target="tabs.tab" data-action="click->tabs#change" class="tabs--header">
+        <span><%= @following.size %> Following</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="tabs-details">
+    <div data-target="tabs.panel">
       <% @user.snippets.order(created_at: :desc).each do |snippet| %>
         <snippet-preview
           :key="<%= snippet.id %>"
           :snippet="<%= snippet.serialize(current_user).to_json %>">
         </snippet-preview>
       <% end %>
-    </tab>
-    <tab name="<%= @followers.size %> Followers">
+    </div>
+
+    <div data-target="tabs.panel" class="hidden">
       <% @followers.each_with_index do |follower, index| %>
         <card>
           <a href="<%= user_path(follower)%>" class="follow--container">
@@ -24,8 +40,9 @@
           </a>
         </card>
       <% end %>
-    </tab>
-    <tab name="<%= @following.size %> Following">
+    </div>
+
+    <div data-target="tabs.panel" class="hidden">
       <% @following.each_with_index do |following_user, index| %>
         <card>
           <a href="<%= user_path(following_user)%>" class="follow--container">
@@ -34,6 +51,6 @@
           </a>
         </card>
       <% end %>
-    </tab>
-  </tabs>
-<%# </card> %>
+    </div>
+  </div>
+</div>