Add example navigation to header

2 files changed, 32 insertions, 0 deletions

diff --git a/src/components/Header.js b/src/components/Header.js
index ccb8e87..1e5a1a0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -14,6 +14,15 @@ class Header extends React.Component {
                 <div id="title">
                     <Link to="/">✨ SOC Dashboard</Link>
                 </div>
+                <div id="navigation">
+                    <Link to="/" className="active">
+                        Example Navigation
+                    </Link>
+                    <span id="separator">•</span>
+                    <Link to="/">Example Navigation</Link>
+                    <span id="separator">•</span>
+                    <Link to="/">Example Navigation</Link>
+                </div>
                 <div id="right">
                     <Button
                         variant="contained"
diff --git a/src/styles/main.css b/src/styles/main.css
index b53cfa7..606c6d2 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -30,6 +30,29 @@ a:visited {
     font-style: italic;
 }
 
+#header #navigation {
+    flex-grow: 1;
+    margin-left: 3em;
+    margin-right: 3em;
+    font-size: 1.2em;
+}
+
+#header #navigation a {
+    color: #7d9cb8;
+    text-decoration: none;
+}
+
+#header #navigation a.active {
+    font-weight: bold;
+}
+
+#header #separator {
+    display: inline-block;
+    width: 2em;
+    text-align: center;
+    color: #9c9c9c;
+}
+
 /* Object */
 
 .object {