added navbar to the components page

_includes/components/navbar.html

@@ -0,0 +1,34 @@
+<div id="header" class="mb-4 mt-5">
+    <h2>Header</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="bg-light p-5" id="">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
+  <a class="navbar-brand mr-5" href="https://geti2p.net/">
+    <img src="{{site.baseurl}}{{site.logo}}" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="SGnavSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
+      </li>
+		</ul>
+	</div>
+</nav>
+</div>

_layouts/components.html

@@ -19,6 +19,7 @@
         {% include components/buttons.html %}
         {% include components/badges.html %}
         {% include components/forms.html %}
+        {% include components/navbar.html %}
         {% include components/tables.html %}
         {% include components/cards.html %}
         {% include components/paginate.html %}

_site/assets/styles/components.scss

@@ -1,7 +1,3 @@
-.navbar {
-  // background-color: $oc-white !important;
-}
-
 .background-primary {
   background-color: $primary;
 }
@@ -246,6 +242,26 @@
   background-color: $secondary !important;
 }
 
+#styleguide-nav {
+  background-color: $oc-white !important;
+	.nav-item:hover {
+		box-shadow: inset 0 -5px $primary;
+
+		& .nav-link {
+			color: $primary;
+		}
+	}
+	.nav-link {
+		color: $oc-gray-9;
+	}
+
+	.show {
+		.nav-item:hover {
+			box-shadow: 0 0;
+		}
+	}
+}
+
 .rb-link {
   color: $primary !important;
   &:hover {

_site/assets/styles/main.css

@@ -161,6 +161,12 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
 
 .badge-secondary { background-color: #60AB60 !important; }
 
+#styleguide-nav { background-color: #ffffff !important; }
+#styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; }
+#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
+#styleguide-nav .nav-link { color: #212529; }
+#styleguide-nav .show .nav-item:hover { box-shadow: 0 0; }
+
 .rb-link { color: #4661A9 !important; }
 .rb-link:hover { color: #60AB60 !important; }
 

_site/components/index.html

@@ -93,6 +93,12 @@
       
     
       
+        <a href="#header"><li class="list-group-item rb-sidebar">
+          Header
+        </li></a>
+      
+    
+      
         <a href="#tables"><li class="list-group-item rb-sidebar">
           Tables
         </li></a>
@@ -186,6 +192,41 @@
     </form>
 </div>
 
+        <div id="header" class="mb-4 mt-5">
+    <h2>Header</h2>
+    <!--p class="text-muted">Some Description about buttons.</p-->
+</div>
+<div class="bg-light p-5" id="">
+<nav class="navbar navbar-expand-lg navbar-light border-bottom align-items-end pb-0" id="styleguide-nav" "style=background: $oc-white">
+  <a class="navbar-brand mr-5" href="https://geti2p.net/">
+    <img src="/i2p-styleguide/assets/images/horizontal_color.png" class="my-2" height="40" width="auto" alt=""></img>
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SGnavSupportedContent" aria-controls="SGnavSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="SGnavSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Blog</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Getting started</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Docs & data</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">Contribute</a>
+      </li>
+      <li class="nav-item pb-2">
+        <a class="nav-link mx-1 text-capitalize font-weight-bold" href="#">About us</a>
+      </li>
+		</ul>
+	</div>
+</nav>
+</div>
+
         <div class="mt-5" id="tables">
     <h2>Tables</h2>
     <div class="row mt-5">

assets/styles/components.scss

@@ -1,7 +1,3 @@
-.navbar {
-  // background-color: $oc-white !important;
-}
-
 .background-primary {
   background-color: $primary;
 }
@@ -246,6 +242,26 @@
   background-color: $secondary !important;
 }
 
+#styleguide-nav {
+  background-color: $oc-white !important;
+	.nav-item:hover {
+		box-shadow: inset 0 -5px $primary;
+
+		& .nav-link {
+			color: $primary;
+		}
+	}
+	.nav-link {
+		color: $oc-gray-9;
+	}
+
+	.show {
+		.nav-item:hover {
+			box-shadow: 0 0;
+		}
+	}
+}
+
 .rb-link {
   color: $primary !important;
   &:hover {

components.md

@@ -7,6 +7,7 @@
   - buttons: Buttons
   - badges: Badges
   - forms: Forms
+  - header: Header
   - tables: Tables
   - cards: Cards
   - scrollspy: Scrollspy