Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

124 make top navbar #139

Merged
merged 16 commits into from
Sep 25, 2024
30 changes: 30 additions & 0 deletions django/src/pages/templates/extends/base.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,29 @@
<div id="wrapper">
antoineverin marked this conversation as resolved.
Show resolved Hide resolved
<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="logoutButtonNavbar" 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="wrapper">
<div id="sidebar-wrapper" class="bg-light border toggled">
<div class="sidebar-heading">ft_transcendence</div>
Expand Down Expand Up @@ -32,4 +58,8 @@
route(event.target.getAttribute('href'));
});
});

document.getElementById("logoutButtonNavbar").addEventListener("click", function (e) {
antoineverin marked this conversation as resolved.
Show resolved Hide resolved
logout();
})
</script>
41 changes: 41 additions & 0 deletions nginx/src/css/navbar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
.navbar {
background-color: #424242;
color: #fecaca;
height: 4.2rem;
min-height: 60px;
antoineverin marked this conversation as resolved.
Show resolved Hide resolved
display: flex;
flex-direction: row;
}

.navbar-brand {
color: white;
padding-left: 5rem;
}

.div-navbar-profile {
display: inline;
padding-right: 75px;
}

#navbar-list {
list-style-type: none;
justify-content: center;
padding-right: 25px;
}

.navbar-profile-button {
padding: 0.5rem 0.75rem;
}

.dropdown {
z-index: 1000;
right: 2.5rem;
}

.dropdown-item {
margin: 0;
}

.dropdown-toggle::after {
display: none;
}
2 changes: 2 additions & 0 deletions nginx/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading