Add collapsible navbar to all pages
This commit is contained in:
Preston Doman
parent
f72fb78c95
commit
108a854ef8
5 changed files with 72 additions and 23 deletions
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
|
|
@ -10,6 +11,22 @@
|
|||
<title>Reimbursinator</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#">Reimbursinator</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-dashboard-navbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="collapsing-dashboard-navbar">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link log-out-link" href="#">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
Log out
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Reimbursinator Report</h1>
|
||||
|
|
@ -31,7 +48,7 @@
|
|||
</ul>
|
||||
<ul class="nav justify-content-end">
|
||||
<li class="nav-item">
|
||||
<a id="logoutLink" class="nav-link" href="#">Logout</a>
|
||||
<a class="nav-link log-out-link" href="#">Log out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
|
|
@ -10,6 +11,28 @@
|
|||
<title>Reimbursinator</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="#">Reimbursinator</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsing-index-navbar">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="collapsing-index-navbar">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="login.html">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
Log in
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="signup.html">
|
||||
<i class="fas fa-user-plus"></i>
|
||||
Sign up
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Reimbursinator</h1>
|
||||
|
|
@ -19,7 +42,7 @@
|
|||
<a class="nav-link active" href="signup.html">Sign up</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="login.html">Login</a>
|
||||
<a class="nav-link" href="login.html">Log in</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,24 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
<link rel="shortcut icon" href="/favicon.ico">
|
||||
<title>Login</title>
|
||||
<title>Log in</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Login Page</h1>
|
||||
<form method="POST">
|
||||
username: <input type="text" name="username" required><br>
|
||||
password: <input type="password" name="password" required><br>
|
||||
<input type="submit" name="submit" value="submit">
|
||||
</form>
|
||||
<p id="errorReport"><p>
|
||||
<script src="login.js"></script>
|
||||
</body>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="index.html">Reimbursinator</a>
|
||||
</nav>
|
||||
<h1>Log in</h1>
|
||||
<form method="POST">
|
||||
username: <input type="text" name="username" required><br>
|
||||
password: <input type="password" name="password" required><br>
|
||||
<input type="submit" name="submit" value="submit">
|
||||
</form>
|
||||
<p id="errorReport"><p>
|
||||
<script src="login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -29,5 +29,6 @@ function postToLogoutEndpoint(event) {
|
|||
xhr.send();
|
||||
}
|
||||
|
||||
const logoutLink = document.querySelector("#logoutLink");
|
||||
logoutLink.addEventListener("click", postToLogoutEndpoint);
|
||||
const logoutLinks = document.querySelectorAll(".log-out-link");
|
||||
logoutLinks[0].addEventListener("click", postToLogoutEndpoint);
|
||||
logoutLinks[1].addEventListener("click", postToLogoutEndpoint);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
|
|
@ -10,14 +11,17 @@
|
|||
<title>Sign up</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Sign up page</h1>
|
||||
<form id="signup">
|
||||
User Name: <input type="text" id="userName" minlength="4" size="10" required="required"><br>
|
||||
Password: <input type="password" id="password" minlength="4" size="10" required="required"><br>
|
||||
Confirm Password: <input type="password" id="confirmPassword"><br>
|
||||
<input type="submit" value="Submit" formaction="index.html">
|
||||
<a class="nav-link" href="index.html">Return to main menu</a>
|
||||
</form>
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="index.html">Reimbursinator</a>
|
||||
</nav>
|
||||
<h1>Sign up page</h1>
|
||||
<form id="signup">
|
||||
User Name: <input type="text" id="userName" minlength="4" size="10" required="required"><br>
|
||||
Password: <input type="password" id="password" minlength="4" size="10" required="required"><br>
|
||||
Confirm Password: <input type="password" id="confirmPassword"><br>
|
||||
<input type="submit" value="Submit" formaction="index.html">
|
||||
<a class="nav-link" href="index.html">Return to main menu</a>
|
||||
</form>
|
||||
</body>
|
||||
<script src="signupPage.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue