lucielle/website
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

bottom navigation functionality

Browse Source
This commit is contained in:
Lucielle
2025-12-02 11:46:59 -06:00
parent 8af6ee7cd5
commit 70806b80ee
6 changed files with 59 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
_bottomnav.html
View File

@@ -1,5 +1,8 @@
<ul id="bottomnav">
<div id="bottomnav">
<ul>
<li><a href="/">[/]</a></li>
<li><a href="#">[/projects]</a></li>
<li><a href="#">[/links]</a></li>
<li><a href="/projects.html">[/projects]</a></li>
<li><a href="/links.html">[/links]</a></li>
</ul>
<span>PWD: [%PATH%]</span>
</div>

20
assets/index.css → assets/global.css
View File

@@ -38,16 +38,25 @@ main img {
#bottomnav {
display: flex;
/* width: 100dvw; */
list-style: none;
justify-content: space-between;
padding: 32px;
margin: 0;
gap: 16px;
outline: 1px solid black;
}
#bottomnav span {
align-self: center;
}
#bottomnav ul {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
gap: 16px;
}
#bottomnav li {
padding: 0px;
}
@@ -64,7 +73,6 @@ main img {
}
#bottomnav a:hover {
cursor: not-allowed;
text-decoration: underline;
background: black;

8
assets/global.js
View File

@@ -3,7 +3,11 @@ const parser = new DOMParser();
fetch("/_bottomnav.html")
.then(response => response.text())
.then(text => {
const bottomNav = parser.parseFromString(text, "text/html");
const bottomNavHTML = parser.parseFromString(text, "text/html");
const bottomNav = bottomNavHTML.getElementById("bottomnav");
document.body.appendChild(bottomNav.getElementById("bottomnav"));
const pathSpan = bottomNav.querySelector("span");
pathSpan.innerText = pathSpan.innerText.replace("%PATH%", document.location.pathname);
document.body.appendChild(bottomNav);
});

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Im bad at naming things</title>
<link rel="stylesheet" href="assets/index.css">
<link rel="stylesheet" href="assets/global.css">
<script src="assets/global.js" defer></script>
</head>
<body>

15
links.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links are pretty cool</title>
<link rel="stylesheet" href="assets/global.css">
<script src="assets/global.js" defer></script>
</head>
<body>
<main>
</main>
</body>
</html>

15
projects.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects 'n' stuff</title>
<link rel="stylesheet" href="assets/global.css">
<script src="assets/global.js" defer></script>
</head>
<body>
<main>
</main>
</body>
</html>