Use tabs for different parts of events page.

Author: dangerworm

css/style.css

@@ -131,13 +131,9 @@ body.landing-page {
     background-color: var(--colour-dark-secondary);
 }
 
-nav {
-    background-color: var(--colour-white);
-    height: 100%;
-}
-
 nav#sidebar {
     background-color: var(--colour-dark-primary);
+    height: 100%;
 }
 
 h1,
@@ -338,6 +334,16 @@ div.intro-text>p {
     font-size: large;
 }
 
+/* Events */
+div.nav.nav-tabs {
+    border: none;
+}
+
+div#events-tabs-panes > .tab-pane {
+    padding: 0.5em;
+    border: 1px solid #dee2e6;
+}
+
 /* About */
 img.profile-photo {
     width: 100%;
@@ -352,7 +358,7 @@ img.profile-photo {
 section#events-drop-ins .card,
 section#events-huddles .card,
 section#events-workshops .card {
-    margin: 0.5em 0.5em 0.5em -0.5em
+    margin: 0.5em 0.5em 0.5em 0.5em
 }
 
 div.event-date {

events.html

@@ -13,8 +13,7 @@
 
 <h1>{{page.title}}</h1>
 <p>
-    CodeWith runs <a href="#drop-ins">drop-in sessions</a>, <a href="#huddles">huddles</a>, and
-    <a href="#workshops">scheduled workshops</a>. You can read more about each of these below.
+    CodeWith runs drop-in sessions, huddles, and scheduled workshops. You can read more about each of these below.
 </p>
 <p>
     Before attending any CodeWith event, please read our <a href="{{site.url}}/code-of-conduct">Code of Conduct</a>,
@@ -29,9 +28,21 @@ <h2>Previous Events</h2>
         folder</a>.
 </p>
 
-
-{% include_relative pages-events/events-drop-ins.html %}
-<br />
-{% include_relative pages-events/events-huddles.html %}
-<br />
-{% include_relative pages-events/events-workshops.html %}
+<nav>
+    <div class="nav nav-tabs" id="events-tabs-items" role="tablist">
+        <a class="nav-item nav-link active" id="drop-ins-tab" data-toggle="tab" href="#events-tabs-panes-drop-ins" role="tab" aria-controls="events-tabs-panes-drop-ins" aria-selected="true"><h4>Drop-Ins</h4></a>
+        <a class="nav-item nav-link" id="huddles-tab" data-toggle="tab" href="#events-tabs-panes-huddles" role="tab" aria-controls="events-tabs-panes-huddles" aria-selected="false"><h4>Huddles</h4></a>
+        <a class="nav-item nav-link" id="workshops-tab" data-toggle="tab" href="#events-tabs-panes-workshops" role="tab" aria-controls="events-tabs-panes-workshops" aria-selected="false"><h4>Workshops</h4></a>
+    </div>
+</nav>
+<div class="tab-content" id="events-tabs-panes">
+    <div class="tab-pane fade show active" id="events-tabs-panes-drop-ins" role="tabpanel" aria-labelledby="drop-ins-tab">
+        {% include_relative pages-events/events-drop-ins.html %}
+    </div>
+    <div class="tab-pane fade" id="events-tabs-panes-huddles" role="tabpanel" aria-labelledby="huddles-tab">
+        {% include_relative pages-events/events-huddles.html %}
+    </div>
+    <div class="tab-pane fade" id="events-tabs-panes-workshops" role="tabpanel" aria-labelledby="workshops-tab">
+        {% include_relative pages-events/events-workshops.html %}
+    </div>
+</div>