Skip to content

Commit

Permalink
menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@RasperRevision
RasperRevision committed Mar 2, 2024
1 parent 91c86c7 commit d5333b9
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 14 deletions.
52 changes: 52 additions & 0 deletions about/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About - Rasper Revision</title>

<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link href="/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>

<body>
<div class="position-absolute top-0 end-0 mt-3 me-3">
<button class="btn btn-light" id="sidebarToggle">
<i class="bi bi-list" style="font-size:2rem;color:black"></i>
<i class="bi bi-x d-none" style="font-size:2rem;color:black"></i>
</button>
</div>

<div class="d-flex" id="wrapper">
<div class="bg-dark" id="sidebar">
<div class="sidebar-heading">Rasper Revision</div>
<div class="list-group list-group-flush">
<a href="/" class="list-group-item">Activities</a>
<a href="/about" class="list-group-item">About</a>
<a href="/contact" class="list-group-item">Contact</a>
</div>
</div>
</div>

<script>
document.getElementById('sidebarToggle').addEventListener('click', function () {
document.getElementById('sidebar').classList.toggle('active');
if (document.querySelector('.bi-list').classList.contains('d-none')) {
document.querySelector('.bi-list').classList.remove('d-none');
document.querySelector('.bi-x').classList.add('d-none');
} else {
document.querySelector('.bi-x').classList.remove('d-none');
document.querySelector('.bi-list').classList.add('d-none');
}
});
</script>
</body>

</html>
51 changes: 37 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,23 @@ <h1 class="welcome_title pt-5 m-0 text-center"></h1>

</section>

<section class="position-absolute overlay_items top-0 bottom-0">
<button class="btn btn-link">
<div class="position-absolute top-0 end-0 mt-3 me-3">
<button class="btn btn-light" id="sidebarToggle">
<i class="bi bi-list" style="font-size:2rem;color:black"></i>
<i class="bi bi-x d-none" style="font-size:2rem;color:black"></i>
</button>
</section>
</div>

<div class="d-flex" id="wrapper">
<div class="bg-dark" id="sidebar">
<div class="sidebar-heading">Rasper Revision</div>
<div class="list-group list-group-flush">
<a href="/" class="list-group-item">Activities</a>
<a href="/about" class="list-group-item">About</a>
<a href="/contact" class="list-group-item">Contact</a>
</div>
</div>
</div>

<script src="matchup.js"></script>
<script src="quiz.js"></script>
Expand All @@ -86,17 +98,28 @@ <h1 class="welcome_title pt-5 m-0 text-center"></h1>

title.innerHTML = "Select a topic";

sparent.classList.add('d-none');
document.getElementById('sidebarToggle').addEventListener('click', function () {
document.getElementById('sidebar').classList.toggle('active');
if (document.querySelector('.bi-list').classList.contains('d-none')) {
document.querySelector('.bi-list').classList.remove('d-none');
document.querySelector('.bi-x').classList.add('d-none');
} else {
document.querySelector('.bi-x').classList.remove('d-none');
document.querySelector('.bi-list').classList.add('d-none');
}
});

tparent.classList.add('d-none');
gparent.classList.add('d-none');

//subjects.forEach(function (subject) {
// subject.addEventListener('click', function () {
// subject_chosen = subject.innerHTML;
// sparent.classList.add('d-none');
// tparent.classList.remove('d-none');
// title.innerHTML = "Select a topic";
// });
//});
subjects.forEach(function (subject) {
subject.addEventListener('click', function () {
subject_chosen = subject.innerHTML;
sparent.classList.add('d-none');
tparent.classList.remove('d-none');
title.innerHTML = "Select a topic";
});
});
topics.forEach(function (topic) {
topic.addEventListener('click', function () {
topic_chosen = topic.innerHTML;
Expand All @@ -114,11 +137,11 @@ <h1 class="welcome_title pt-5 m-0 text-center"></h1>
if (game_chosen == "Matchup") {
document.querySelector(".match-up").classList.remove('d-none');
startMatchupStopwatch();
script("Music", topic_chosen);
script(subject_chosen, topic_chosen);
} else if (game_chosen == "Quiz") {
document.querySelector(".quiz").classList.remove('d-none');
startQuizStopwatch();
quiz("Music", topic_chosen);
quiz(subject_chosen, topic_chosen);
}
});
});
Expand Down
31 changes: 31 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,35 @@
border-width: 5px !important;
border-style: solid !important;
background: rgb(239, 222, 222);
}

#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: -250px;
width: 250px;
background-color: #343a40;
padding-top: 3.5rem;
transition: all 0.3s;
}

#sidebar.active {
left: 0;
}

#sidebar .sidebar-heading {
padding: 0.875rem 1.25rem;
text-align: center;
color: #fff;
}

#sidebar .list-group-item {
border: none;
background-color: transparent;
color: #fff;
}

#sidebar .list-group-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

0 comments on commit d5333b9

Please sign in to comment.