From 736ec8c09a0de5adabea40a7b470204df17515bf Mon Sep 17 00:00:00 2001
From: Dominik Picheta <dominikpicheta@gmail.com>
Date: Mon, 7 May 2018 20:26:17 +0100
Subject: [PATCH] Implement secondary "navbar" containing top buttons.

---
 redesign/index.html    | 21 +++++++++++++++++++++
 redesign/nimforum.scss | 11 +++++++++++
 2 files changed, 32 insertions(+)

diff --git a/redesign/index.html b/redesign/index.html
index 606a07c..a11e367 100644
--- a/redesign/index.html
+++ b/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>
\ No newline at end of file
diff --git a/redesign/nimforum.scss b/redesign/nimforum.scss
index 2f7065c..e4766d5 100644
--- a/redesign/nimforum.scss
+++ b/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;
 }
\ No newline at end of file