diff --git a/static/css/styles.css b/static/css/styles.css
index 463176c..b142c9e 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,50 +1,84 @@
* {
- margin: 0;
- padding: 0;
+ margin: 0;
+ padding: 0;
}
-#navbar-container {
- height: 2.5rem;
- display: flex;
- justify-content: space-between;
- background-color: #181825;
- color: white;
- align-items: center;
- gap: 0.4rem;
+body {
+ margin: 0;
+ font-family: Arial, sans-serif;
}
-#navbar .left {
- position: relative;
+.navbar {
+ background-color: #333;
+ color: #fff;
+ /*padding: 1rem;*/
+ position: relative;
+ z-index: 1000;
}
-#navbar .right {
- display: flex;
-}
-
-#navbar .link {
- padding: 0.3rem 0.4rem;
-}
-
-#navbar .item {
- display: flex;
-}
-#navbar .button {
- display: none;
-}
-@media (max-width: 770px) {
- #navbar .item {
- display: none;
- }
- #navbar .button .item {
+.navbar-container {
display: flex;
- }
-
- #navbar .item {
- display: none;
- }
- #navbar .item .open {
- width: 100%;
- padding: 0;
- display: flex;
- }
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo {
+ width: 4%;
+ height: 4%;
+ margin-left: 5px;
+}
+
+.nav-links {
+ list-style: none;
+ display: flex;
+ gap: 1.5rem;
+ margin: 1rem;
+}
+
+.nav-links a {
+ color: #fff;
+ text-decoration: none;
+ font-size: 1.3rem;
+}
+
+.nav-toggle {
+ display: none;
+ flex-direction: column;
+ gap: 5px;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+@media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ flex-direction: column;
+ gap: 0;
+ position: absolute;
+ background-color: #333;
+ width: 100%;
+ top: 100%;
+ left: 0;
+ margin: 0;
+ }
+
+ .nav-links.active {
+ display: flex;
+ }
+
+ .nav-toggle {
+ display: flex;
+ }
+
+ .nav-links li {
+ text-align: center;
+ padding: 1rem 0;
+ }
+
+ .nav-links a {
+ display: block;
+ width: 100%;
+ padding: 1rem 0;
+ }
}
diff --git a/static/html/index.html.tera b/static/html/index.html.tera
index b5fca14..803c86a 100644
--- a/static/html/index.html.tera
+++ b/static/html/index.html.tera
@@ -1,29 +1,28 @@
-
-
- Responsive Navbar
-
+
+
+ Responsive Navbar
+
-
-
+
+
diff --git a/static/icons/logo.svg b/static/icons/logo.svg
new file mode 100644
index 0000000..e540390
--- /dev/null
+++ b/static/icons/logo.svg
@@ -0,0 +1,22 @@
+
+
diff --git a/static/icons/menu.svg b/static/icons/menu.svg
new file mode 100644
index 0000000..63895fd
--- /dev/null
+++ b/static/icons/menu.svg
@@ -0,0 +1,5 @@
+
+
+
diff --git a/static/js/scripts.js b/static/js/scripts.js
new file mode 100644
index 0000000..2a2dd27
--- /dev/null
+++ b/static/js/scripts.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const navToggle = document.querySelector('.nav-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ navToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+});