From 8b6c46e8088977b27a33aa28623f2ce05e996664 Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 22:56:23 +0200
Subject: [PATCH 1/9] updated sidebar and page elements css

---
 nginx/src/css/styles.css | 91 +++++++++++++++++++++++++---------------
 1 file changed, 57 insertions(+), 34 deletions(-)

diff --git a/nginx/src/css/styles.css b/nginx/src/css/styles.css
index 8a99baf8..88783612 100644
--- a/nginx/src/css/styles.css
+++ b/nginx/src/css/styles.css
@@ -1,52 +1,79 @@
-#wrapper {
-    width: 100%;
+/* General */
+html {
+    box-sizing: border-box;
+    font-size: 100%;
     height: 100%;
-    display: flex;
-    align-items: stretch;
+    scroll-behavior: smooth;
 }
 
-#sidebar-wrapper {
-    height: 100vh;
-    min-width: 250px;
-    max-width: 250px;
-    transition: all 0.3s ease;
-    text-align: center;
+*, *::before, *::after {
+    box-sizing: inherit;
 }
 
-.sidebar-heading {
-    padding: 1rem;
-    font-size: 1.5rem;
-    text-align: center;
+body {
+    min-height: 100%;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
 }
 
 .list-group-item {
-    padding: 1rem 1.5rem;
+    padding: 10px;
+    cursor: pointer;
     text-align: center;
 }
 
-#wrapper.toggled #sidebar-wrapper {
-    margin-left: -250px;
+.list-group-item.active {
+    background-color: #007bff;
+    color: white;
 }
 
-#menu-toggle {
-    margin: 5px;
+/* Page Content */
+#page-container-wrapper {
+    position: relative;
 }
 
-#page-content-wrapper {
-    width: 100%;
-    padding: 15px;
+/* Sidebar Toggle */
+#sidebar-toggle {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+    font-size: 20px;
+    z-index: 1050;
+    transition: all 0.3s ease;
 }
 
-.container-fluid.center-content {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+#sidebar-toggle.toggled {
+    margin-left: 250px;
 }
 
-#gameSelection {
-    display: block;
-    margin-block: 5px;
+/* Sidebar */
+#sidebar-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 250px;
+    border-radius: 0 5px 5px 0;
+    transition: all 0.3s ease;
+    z-index: 1000;
+    text-align: center;
+}
+
+#sidebar-wrapper.toggled {
+    margin-left: -250px;
+}
+
+#sidebar-wrapper .sidebar-heading {
+    padding: 1rem;
+    font-size: 1.5rem;
+}
+
+#sidebar-wrapper .list-group-item {
+    padding: 1rem 1.5rem;
 }
 
 #game {
@@ -58,7 +85,3 @@
     background-color: black;
     border: 3px solid lightskyblue;
 }
-
-.gameBtn {
-    margin: 5px;
-}

From 19b69cc7ef2df41a5145269ae5dbb82deb896ccf Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 22:56:44 +0200
Subject: [PATCH 2/9] updated index template

---
 django/src/pages/templates/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/django/src/pages/templates/index.html b/django/src/pages/templates/index.html
index a09b5e33..5080b39e 100644
--- a/django/src/pages/templates/index.html
+++ b/django/src/pages/templates/index.html
@@ -1,3 +1,5 @@
-<div class="container-fluid center-content">
-    <p>This is Index</p>
+<div class="h-100 d-flex align-items-center justify-content-center">
+    <div>
+        <p>This is Index</p>
+    </div>
 </div>

From e9144189514ce6c7f5c3c95ed19954d98ad23962 Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 22:57:01 +0200
Subject: [PATCH 3/9] updated 404 template

---
 django/src/pages/templates/404.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/django/src/pages/templates/404.html b/django/src/pages/templates/404.html
index 13422ff2..3d66c322 100644
--- a/django/src/pages/templates/404.html
+++ b/django/src/pages/templates/404.html
@@ -1 +1,5 @@
-<p>Page not found</p>
+<div class="h-100 d-flex align-items-center justify-content-center">
+    <div>
+        <p>Page not found</p>
+    </div>
+</div>

From b6c2d7d9c5d1cc309006871e31c15dfb7bac89ff Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:02:22 +0200
Subject: [PATCH 4/9] updated games template

---
 django/src/pages/templates/games.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/django/src/pages/templates/games.html b/django/src/pages/templates/games.html
index 4ef63820..3fe7373a 100644
--- a/django/src/pages/templates/games.html
+++ b/django/src/pages/templates/games.html
@@ -1,11 +1,11 @@
-<div id="gameSelection">
-    <button id="pongBtn" class="btn btn-secondary gameBtn">Pong</button>
-    <button id="game2Btn" class="btn btn-secondary gameBtn">Tic-Tac-Toe</button>
+<div id="gameSelection" class="d-flex justify-content-center">
+    <button id="pongBtn" class="btn btn-secondary">Pong</button>
+    <button id="game2Btn" class="btn btn-secondary">Tic-Tac-Toe</button>
 </div>
 <div id="game">
-    <button id="backBtn" class="btn btn-dark gameBtn">Back</button>
-    <div class="container-fluid center-content">
+    <button id="backBtn" class="btn btn-dark">Back</button>
+    <div class="center-content">
         <canvas id="gameCanvas" width="800" height="600"></canvas>
     </div>
 </div>
-<div id="gameAgain" class="container-fluid center-content"></div>
+<div id="gameAgain" class="center-content"></div>

From 3238161507de6d0605d7f280426dd6967cf4f0bb Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:02:49 +0200
Subject: [PATCH 5/9] updated index page

---
 nginx/src/index.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/nginx/src/index.html b/nginx/src/index.html
index 0d29f436..9c5a7356 100644
--- a/nginx/src/index.html
+++ b/nginx/src/index.html
@@ -12,18 +12,18 @@
 </head>
 
 <body>
-	<div id="wrapper" class="d-flex">
-		<div id="sidebar-wrapper" class="bg-light border-right">
+	<div id="wrapper">
+		<div id="sidebar-wrapper" class="bg-light border toggled">
 			<div class="sidebar-heading">ft_transcendence</div>
-			<div class="list-group list-group-flush">
-				<a href="/" class="list-group-item list-group-item-action bg-light" data-route>Home</a>
-				<a href="/games" class="list-group-item list-group-item-action bg-light" data-route>Games</a>
-			</div>
+			<ul id="sidebar-list" class="list-group list-group-flush">
+				<li class="list-group-item list-group-item-action" data-route="/">Home</li>
+				<li class="list-group-item list-group-item-action" data-route="/games">Games</li>
+			</ul>
 		</div>
 
-		<div id="page-content-wrapper">
-			<button id="menu-toggle" class="btn btn-primary">Menu</button>
-			<div id="page">
+		<div id="page-container-wrapper">
+			<button id="sidebar-toggle" class="btn btn-primary">☰</button>
+			<div id="page-container">
 			</div>
 		</div>
 	</div>

From 2c5533e5b889551b62838528264794514029248b Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:04:42 +0200
Subject: [PATCH 6/9] simplified router events functions

---
 nginx/src/js/router.js | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/nginx/src/js/router.js b/nginx/src/js/router.js
index c54195df..24168a70 100644
--- a/nginx/src/js/router.js
+++ b/nginx/src/js/router.js
@@ -1,6 +1,6 @@
-function route(event) {
-    event.preventDefault();
-    window.history.pushState({}, "", event.target.href);
+function route(e) {
+    e.preventDefault();
+    window.history.pushState({}, "", e.target.getAttribute('data-route'));
     handleLocation();
 };
 
@@ -19,7 +19,7 @@ async function fetchPage(pageName) {
 };
 
 function loadScripts() {
-    const container = document.getElementById("page");
+    const container = document.getElementById("page-container");
     const scripts = container.querySelectorAll('script');
 
     scripts.forEach(script => {
@@ -42,7 +42,7 @@ async function handleLocation() {
         html = await fetchPage('404');
     }
 
-    document.getElementById("page").innerHTML = html;
+    document.getElementById("page-container").innerHTML = html;
     loadScripts();
     updateTitle(pageName);
 };
@@ -61,15 +61,16 @@ document.addEventListener("DOMContentLoaded", () => {
     window.onpopstate = handleLocation;
     window.route = route;
     handleLocation();
+});
 
-    document.addEventListener("click", (event) => {
-        if (event.target.matches("a[data-route]")) {
-            route(event);
-        }
-    });
+document.addEventListener("click", (e) => {
+    if (e?.target?.hasAttribute('data-route')) {
+        route(e);
+    }
 });
 
-document.getElementById("menu-toggle").addEventListener("click", function (e) {
+document.getElementById("sidebar-toggle").addEventListener("click", function (e) {
     e.preventDefault();
-    document.getElementById("wrapper").classList.toggle("toggled");
+    document.getElementById("sidebar-wrapper").classList.toggle("toggled");
+    this.classList.toggle("toggled");
 });

From 5a21fd351e311db6bb5a66ec61871c133c8096cf Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:05:32 +0200
Subject: [PATCH 7/9] created updateActiveRoute method

---
 nginx/src/js/router.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/nginx/src/js/router.js b/nginx/src/js/router.js
index 24168a70..0825fda0 100644
--- a/nginx/src/js/router.js
+++ b/nginx/src/js/router.js
@@ -34,6 +34,16 @@ function loadScripts() {
     });
 };
 
+function updateActiveRoute(path) {
+    document.querySelectorAll('#sidebar-list .list-group-item').forEach(item => {
+        item.classList.remove('active');
+    });
+    const activeRoute = document.querySelector(`[data-route="${path}"]`);
+    if (activeRoute) {
+        activeRoute.classList.add('active');
+    }
+}
+
 async function handleLocation() {
     let path = window.location.pathname;
     let pageName = path === '/' ? 'index' : path.substring(1);
@@ -45,6 +55,7 @@ async function handleLocation() {
     document.getElementById("page-container").innerHTML = html;
     loadScripts();
     updateTitle(pageName);
+    updateActiveRoute(path);
 };
 
 function updateTitle(pageName) {

From 2538b4f02f31d825b226495923209aa039d10c08 Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:06:04 +0200
Subject: [PATCH 8/9] moved updateTitle function

---
 nginx/src/js/router.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/nginx/src/js/router.js b/nginx/src/js/router.js
index 0825fda0..039e1f8f 100644
--- a/nginx/src/js/router.js
+++ b/nginx/src/js/router.js
@@ -34,6 +34,16 @@ function loadScripts() {
     });
 };
 
+function updateTitle(pageName) {
+    const titles = {
+        "index": "Home",
+        "games": "Games",
+        "404": "Page Not Found"
+    };
+    const title = titles[pageName] || "Page Not Found";
+    document.title = title;
+};
+
 function updateActiveRoute(path) {
     document.querySelectorAll('#sidebar-list .list-group-item').forEach(item => {
         item.classList.remove('active');
@@ -58,16 +68,6 @@ async function handleLocation() {
     updateActiveRoute(path);
 };
 
-function updateTitle(pageName) {
-    const titles = {
-        "index": "Home",
-        "games": "Games",
-        "404": "Page Not Found"
-    };
-    const title = titles[pageName] || "Page Not Found";
-    document.title = title;
-};
-
 document.addEventListener("DOMContentLoaded", () => {
     window.onpopstate = handleLocation;
     window.route = route;

From 5e06913879eac75b9f6377ed33af6d728d431fdd Mon Sep 17 00:00:00 2001
From: Neffi42 <114996380+Neffi42@users.noreply.github.com>
Date: Thu, 29 Aug 2024 23:07:30 +0200
Subject: [PATCH 9/9] created new route for error 404

---
 django/src/pages/urls.py  | 1 +
 django/src/pages/views.py | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/django/src/pages/urls.py b/django/src/pages/urls.py
index 63030a0d..356fc9d7 100644
--- a/django/src/pages/urls.py
+++ b/django/src/pages/urls.py
@@ -4,4 +4,5 @@
 urlpatterns = [
 	path('index/', views.index),
 	path('games/', views.games),
+    path('404/', views.error_404),
 ]
diff --git a/django/src/pages/views.py b/django/src/pages/views.py
index 39fcaf87..d639136e 100644
--- a/django/src/pages/views.py
+++ b/django/src/pages/views.py
@@ -24,3 +24,7 @@ def index(request):
 @require_GET
 def games(request):
 	return create_response(request, 'games.html')
+
+@require_GET
+def error_404(request):
+	return create_response(request, '404.html')