Merge pull request #139 from TheSecretOrganization/124-make-top-navbar

124 make top navbar
TheSecretOrganization · Sep 25, 2024 · c91c614 · c91c614
2 parents d695ea6 + 726a44c
commit c91c614
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/django/src/pages/templates/extends/base.html b/django/src/pages/templates/extends/base.html
@@ -1,4 +1,30 @@
-<div id="wrapper">
+<div id="bars-wrapper">
+	<div id="navbar-wrapper">
+		<nav class="navbar">
+			<b class="navbar-brand nav navbar-nav navbar-left">Johnny Depp</b>
+			{% if user.is_authenticated %}
+			<div class="container-dropdown">
+				<div class="dropdown">
+					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
+								{{ user.username }} <span class="glyphicon glyphicon-picture"></span>
+							</button>
+							<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
+								<li><a class="dropdown-item" data-route href="#">Profile</a></li>
+								<li><a class="dropdown-item" data-route href="#">Settings</a></li>
+								<li><hr class="dropdown-divider"></li>
+								<li><button id="logout-button-navbar" class="dropdown-item fw-bold">Log out <span class="glyphicon glyphicon-log-out"></span></button></li>
+							</ul>
+						</div>
+					</div>
+			{% else %}
+			<ul id="navbar-list" class="list-group list-group-flush list-group-horizontal-sm list-unstyled nav navbar-nav navbar-right">
+				<li class="m-2"><a class="btn btn-sm btn-success rounded-pill rounded-5" data-route href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
+				<li class="m-2"><a class="btn btn-sm btn-outline-success rounded-pill rounded-5" data-route href="/register"><span class="glyphicon glyphicon-user"></span> Register</a></li>
+			</ul>
+			{% endif %}
+		</nav>
+	</div>
+
 	<div id="sidebar-wrapper" class="bg-light border toggled">
 		<div class="sidebar-heading">ft_transcendence</div>
 		<ul id="sidebar-list" class="list-group list-group-flush">
@@ -32,4 +58,8 @@
 			route(event.target.getAttribute('href'));
 		});
 	});
+
+	document.getElementById("logout-button-navbar").addEventListener("click", function (e) {
+		logout();
+	})
 </script>
diff --git a/nginx/src/css/navbar.css b/nginx/src/css/navbar.css
@@ -0,0 +1,40 @@
+.navbar {
+	background-color: #424242;
+	height: 4.2rem;
+	min-height: 3.75rem;
+	display: flex;
+	flex-direction: row;
+}
+
+.navbar-brand {
+	color: white;
+	padding-left: 5rem;
+}
+
+.div-navbar-profile {
+	display: inline;
+	padding-right: 4.5rem;
+}
+
+#navbar-list {
+	list-style-type: none;
+	justify-content: center;
+	padding-right: 1.5rem;
+}
+
+.navbar-profile-button {
+	padding: 0.5rem 0.75rem;
+}
+
+.dropdown {
+	z-index: 1000;
+	right: 2.5rem;
+}
+
+.dropdown-item {
+	margin: 0;
+}
+
+.dropdown-toggle::after {
+	display: none;
+}
diff --git a/nginx/src/index.html b/nginx/src/index.html
@@ -7,8 +7,10 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
 		integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+	<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
 	<link rel="stylesheet" type="text/css" href="/css/styles.css">
 	<link rel="stylesheet" type="text/css" href="/css/sidebar.css">
+	<link rel="stylesheet" type="text/css" href="/css/navbar.css">
 	<link rel="stylesheet" type="text/css" href="/css/games.css">
 	<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
 </head>