Skip to content

Commit

Permalink
Merge pull request #23 from UR-dandyhacks/feature/sticky-navbar
Browse files Browse the repository at this point in the history 
Intelligent navbar
  • Loading branch information
@cszach
cszach authored Oct 15, 2023
2 parents b591f5e + 930efb9 commit cd19a58
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 95 deletions.
15 changes: 3 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
</head>

<body class="font-sans text-lavender bg-deep-purple">
<nav class="absolute flex flex-row items-center justify-between flex-none w-full px-5 py-5 lg:px-12 bg-deep-purple">
<nav class="fixed z-10 flex flex-row items-center justify-between flex-none w-full px-5 py-5 transition-transform ease-in-out lg:px-12 bg-deep-purple translate-y-0">
<h3 class="text-2xl">DandyHacks &OpenCurlyQuote;23</h3>
<div>
<input class="absolute z-20 w-8 h-8 opacity-0 peer lg:hidden" type="checkbox" />
<img class="lg:hidden" src="img/icons/hamburger.png" />
<ul class="fixed top-0 right-0 z-10 flex flex-col h-full pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<ul class="fixed top-0 right-0 z-10 flex flex-col h-screen pt-16 text-3xl font-bold transition-transform ease-in-out gap-8 lg:flex-row lg:text-xl px-9 lg:p-0 w-72 bg-violet peer-checked:translate-x-0 translate-x-72 lg:bg-deep-purple lg:translate-x-0 lg:w-fit lg:h-fit lg:relative lg:gap-16 lg:transition-none">
<li class="text-right"><a href="#about">About</a></li>
<li class="text-right"><a href="#faq">FAQ</a></li>
<li class="hidden text-right lg:block"><a href="#sponsoring">Sponsoring</a></li>
Expand Down Expand Up @@ -212,16 +212,7 @@ <h3 class="text-3xl text-center pb-7">Why sponsor?</h3>
<span>© 2023 DandyHacks</span>
</div>
</footer>
<script>
let navigationLinks = document.querySelectorAll('nav li');
let hamburgerCheckbox = document.querySelector('nav .peer');

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', e => {
hamburgerCheckbox.checked = false;
});
});
</script>
<script src="script.js"></script>
</body>

</html>
41 changes: 41 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
document.addEventListener('DOMContentLoaded', () => {
const navBar = document.querySelector('nav');
const navigationLinks = navBar.querySelectorAll('li');
const hamburgerCheckbox = navBar.querySelector('.peer');

// Hamburger navigation

navigationLinks.forEach(navigationLink => {
navigationLink.addEventListener('click', () => {
document.body.classList.remove('overflow-hidden');
hamburgerCheckbox.checked = false;
});
});

// Navbar appears on scroll down and hides on scroll up

let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
window.scrollY - lastScrollY > 0 ? hideNavBar() : showNavBar();
lastScrollY = window.scrollY;
});

function hideNavBar() {
navBar.classList.add('-translate-y-full');
navBar.classList.remove('translate-y-0');
}

function showNavBar() {
navBar.classList.add('translate-y-0');
navBar.classList.remove('-translate-y-full');
}

// Disable scrolling when navigation menu is visible

hamburgerCheckbox.addEventListener('change', (e) => {
if (e.target.checked) {
document.body.classList.add('overflow-hidden');
}
});
});
123 changes: 40 additions & 83 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,18 +643,14 @@ h1, h2, h3, h4, h5, h6 {
inset-inline-end: 0.25rem;
}

.left-0 {
left: 0px;
.right-0 {
right: 0px;
}

.top-0 {
top: 0px;
}

.right-0 {
right: 0px;
}

.isolate {
isolation: isolate;
}
Expand All @@ -663,6 +659,10 @@ h1, h2, h3, h4, h5, h6 {
isolation: auto;
}

.z-0 {
z-index: 0;
}

.z-10 {
z-index: 10;
}
Expand All @@ -671,6 +671,14 @@ h1, h2, h3, h4, h5, h6 {
z-index: 20;
}

.z-30 {
z-index: 30;
}

.z-50 {
z-index: 50;
}

.float-right {
float: right;
}
Expand Down Expand Up @@ -818,30 +826,24 @@ h1, h2, h3, h4, h5, h6 {
display: none;
}

.h-screen {
height: 100vh;
.h-8 {
height: 2rem;
}

.h-full {
height: 100%;
}

.h-max {
height: -moz-max-content;
height: max-content;
}

.h-min {
height: -moz-min-content;
height: min-content;
.h-screen {
height: 100vh;
}

.h-5 {
height: 1.25rem;
.w-72 {
width: 18rem;
}

.h-8 {
height: 2rem;
.w-8 {
width: 2rem;
}

.w-\[434px\] {
Expand All @@ -852,40 +854,6 @@ h1, h2, h3, h4, h5, h6 {
width: 100%;
}

.w-max {
width: -moz-max-content;
width: max-content;
}

.w-min {
width: -moz-min-content;
width: min-content;
}

.w-5 {
width: 1.25rem;
}

.w-8 {
width: 2rem;
}

.w-96 {
width: 24rem;
}

.w-52 {
width: 13rem;
}

.w-80 {
width: 20rem;
}

.w-72 {
width: 18rem;
}

.flex-none {
flex: none;
}
Expand Down Expand Up @@ -930,11 +898,21 @@ h1, h2, h3, h4, h5, h6 {
border-collapse: separate;
}

.-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-72 {
--tw-translate-x: 18rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-0 {
--tw-translate-y: 0px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\!transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
Expand Down Expand Up @@ -1415,10 +1393,6 @@ h1, h2, h3, h4, h5, h6 {
gap: 3rem;
}

.gap-16 {
gap: 4rem;
}

.gap-2 {
gap: 0.5rem;
}
Expand Down Expand Up @@ -2042,14 +2016,6 @@ h1, h2, h3, h4, h5, h6 {
padding: 3rem;
}

.p-9 {
padding: 2.25rem;
}

.p-20 {
padding: 5rem;
}

.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
Expand Down Expand Up @@ -2743,17 +2709,17 @@ details p {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:checked ~ .peer-checked\:overflow-hidden {
overflow: hidden;
}

@media (min-width: 640px) {
.sm\:underline {
text-decoration-line: underline;
}
}

@media (min-width: 1024px) {
.lg\:static {
position: static;
}

.lg\:relative {
position: relative;
}
Expand Down Expand Up @@ -2817,6 +2783,10 @@ details p {
gap: 3.5rem;
}

.lg\:gap-16 {
gap: 4rem;
}

.lg\:gap-2 {
gap: 0.5rem;
}
Expand All @@ -2829,28 +2799,15 @@ details p {
gap: 5rem;
}

.lg\:gap-16 {
gap: 4rem;
}

.lg\:self-start {
align-self: flex-start;
}

.lg\:bg-lavender {
--tw-bg-opacity: 1;
background-color: rgb(229 204 255 / var(--tw-bg-opacity));
}

.lg\:bg-deep-purple {
--tw-bg-opacity: 1;
background-color: rgb(27 0 44 / var(--tw-bg-opacity));
}

.lg\:bg-opacity-0 {
--tw-bg-opacity: 0;
}

.lg\:bg-fireflies {
background-image: url('img/website-bg2.png');
}
Expand Down

0 comments on commit cd19a58

Please sign in to comment.