Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Turn the navigation bar into a WebC component

This commit is contained in:
Helen Chong 2024-04-11 23:57:02 +08:00
parent 55ce73a294
commit 74fc59f9b5
5 changed files with 80 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_includes/main/base.njk
View File

@ -45,14 +45,14 @@
</head>
<body>
{% include "main/header.njk" %}
{% include "main/navbar.njk" %}
{% renderTemplate "webc" %}
<navbar></navbar>
{% endrenderTemplate %}
<main>
<!-- <aside class="left-sidebar">
Left sidebar content here
</aside> -->
{{ content | safe }}
<!-- <aside class="right-sidebar">
Right sidebar content here
</aside> -->

14
src/_includes/main/navbar.njk
View File

@ -1,14 +0,0 @@
<nav class="navbar">
<ul class="nav__menu">
<li><a href="/home">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/mycreations/">My Creations</a></li>
<li><a href="/featured/">Featured</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/shrines/">Shrines</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
</ul>
</nav>

77
src/_includes/main/navbar.webc Normal file
View File

@ -0,0 +1,77 @@
<nav class="navbar">
<ul class="nav__menu">
<li><a href="/home">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/articles/">Articles</a></li>
<li><a href="/mycreations/">My Creations</a></li>
<li><a href="/featured/">Featured</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/shrines/">Shrines</a></li>
<li><a href="/links/">Links</a></li>
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
</ul>
</nav>
<style webc:keep webc:bucket="defer">
navbar {
background: var(--clr-navbar-bg);
padding: 0 0.6rem;
width: 100%;
z-index: 999;
}
.navbar a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
}
.navbar a:hover {
color: var(--clr-link-hover);
}
.navbar a:focus {
outline-offset: 0.3em;
outline: 0.15em solid var(--clr-navbar-link);
}
.nav__menu {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100%;
top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement
as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky-nav + main {
padding-top: 2rem;
}
</style>
<script webc:keep webc:bucket="defer">
// Make the navigation bar sticky
const header = document.querySelector(".main-header");
const navbar = document.querySelector("navbar");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});
</script>

46
src/assets/css/main.css
View File

@ -256,52 +256,6 @@ dd {
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
}
/* NAVIGATION BAR COMPONENT */
.navbar {
background: var(--clr-navbar-bg);
padding: 0 0.6rem;
width: 100%;
z-index: 999;
}
.navbar a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
}
.navbar a:hover {
color: var(--clr-link-hover);
}
.navbar a:focus {
outline-offset: 0.3em;
outline: 0.15em solid var(--clr-navbar-link);
}
.nav__menu {
list-style: none;
padding: 0;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Added to the navbar with JS when it reaches its scroll position */
.sticky-nav {
position: fixed;
width: 100%;
top: 0;
}
/* Add some top padding to the page content to prevent sudden quick movement
as the navigation bar gets a new position at the top of the page
(position:fixed and top:0) */
.sticky-nav + main {
padding-top: 2rem;
}
/* MAIN CONTENT */
main,
.content-container,

13
src/assets/js/navbar.js
View File

@ -1,13 +0,0 @@
// Make the navigation bar sticky
const header = document.querySelector(".main-header");
const navbar = document.querySelector(".navbar");
window.addEventListener("scroll", e => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const stickyLine = header.scrollHeight - navbar.scrollHeight;
if (scrollPos > stickyLine) {
navbar.classList.add("sticky-nav");
} else {
navbar.classList.remove("sticky-nav");
}
});