From dc3b11cf03b45c51beed5c2bd1077c1ccbc79d76 Mon Sep 17 00:00:00 2001
From: Joost Agterhoek <mail@joostagterhoek.nl>
Date: Sat, 26 Apr 2025 21:22:04 +0200
Subject: [PATCH] got a very basic navbar working, now need to learn the actual
 styling to make it fit

---
 flask_soc_site/static/styles/style.css | 42 ++++++++++++++++++++++++++
 flask_soc_site/templates/lookup.html   |  2 ++
 flask_soc_site/templates/navbar.html   | 18 +++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 flask_soc_site/templates/navbar.html

diff --git a/flask_soc_site/static/styles/style.css b/flask_soc_site/static/styles/style.css
index 355d205..61034d2 100644
--- a/flask_soc_site/static/styles/style.css
+++ b/flask_soc_site/static/styles/style.css
@@ -15,6 +15,48 @@ body {
 	margin: 0;
 }
 
+a {
+	text-decoration: none;
+}
+
+.navbar {
+
+	display: flex;
+	align-items: center;
+	background-color: #333333;
+}
+
+
+.navbar a {
+	color: #e7e7e7;
+}
+
+.navbar ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: 0;
+	display: flex;
+	align-items: center;
+}
+
+.navbar .brand {
+	display: block;
+	color: #e7e7e7;
+	padding: 0 24px;
+	font-size: 24px;
+}
+
+.navbar ul li a {
+	color: #e7e7e7;
+	padding: 24px;
+	display: block;
+}
+
+.navbar ul a:hover,
+.navbar ul a:focus {
+	background-color: #272727;
+}
+
 .headings {
 	color: #fdc105;
 	display: flex;
diff --git a/flask_soc_site/templates/lookup.html b/flask_soc_site/templates/lookup.html
index 3954d63..f43bd67 100644
--- a/flask_soc_site/templates/lookup.html
+++ b/flask_soc_site/templates/lookup.html
@@ -2,6 +2,8 @@
  
 {% block content %}
 
+{% include "navbar.html" %}
+
 <!-- {% include "forms.html" %} -->
 
 {% include "test.html" %}
diff --git a/flask_soc_site/templates/navbar.html b/flask_soc_site/templates/navbar.html
new file mode 100644
index 0000000..149b6f3
--- /dev/null
+++ b/flask_soc_site/templates/navbar.html
@@ -0,0 +1,18 @@
+<!--
+<style>
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+</style>
+-->
+
+<!--Continue from: https://dev.to/roccosangellino/how-to-build-a-simple-navbar-with-html-and-css-945-->
+
+<nav class="navbar">
+  <ul>
+    <li><b><a href="#">Home</a></b></li>
+    <li><b><a href="#">History</a></b></li>
+  </ul>
+</nav>