Implement secondary "navbar" containing top buttons.

redesign/index.html

@@ -9,6 +9,7 @@
   <title>The Nim programming language forum</title>
 
   <link rel="stylesheet" href="nimforum.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
   <link rel="icon" href="images/favicon.png">
 </head>
 
@@ -29,6 +30,26 @@
       </section>
     </header>
 
+    <section class="navbar container grid-xl" id="main-buttons">
+      <section class="navbar-section">
+        <div class="dropdown bg-secondary">
+          <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+            Filter <i class="fas fa-caret-down"></i>
+          </a>
+          <ul class="menu">
+            <li>community</li>
+            <li>dev</li>
+          </ul>
+        </div>
+      </section>
+      <section class="navbar-section">
+        <button class="btn btn-primary">Latest</button>
+        <button class="btn btn-link">Most Active</button>
+        <button class="btn btn-link">Categories</button>
+      </section>
+
+    </section>
+
 </body>
 
 </html>

redesign/nimforum.scss

@@ -7,6 +7,12 @@ $dark-color: #3e396b;
 // Import full Spectre source code
 @import "spectre/src/spectre";
 
+// Global styles.
+// - TODO: Make these non-global.
+.btn {
+  margin-left: $control-padding-x;
+}
+
 // Custom styles.
 // - Navigation bar.
 $navbar-height: 60px;
@@ -24,5 +30,10 @@ $logo-height: $navbar-height - 20px;
 
 .navbar-control {
   margin-left: $control-padding-x;
-
+}
+
+// - Main buttons
+#main-buttons {
+  margin-top: $control-padding-y;
+  margin-bottom: $control-padding-y;
 }