From e3b0a8243d168f4ace3dac1f9ce457ef254f6f7c Mon Sep 17 00:00:00 2001
From: Ernst Widerberg <ernst@sunet.se>
Date: Tue, 11 Jan 2022 09:23:13 +0100
Subject: Add example navigation to header

---
 src/components/Header.js |  9 +++++++++
 src/styles/main.css      | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+)

(limited to 'src')

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 {
-- 
cgit v1.1