dofdev/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dynamic onpage class set based on currentPath

Browse source
This commit is contained in:
ethan merchant 2024-11-27 14:26:11 -05:00
parent 5897374fd9
commit 151ee3ffdb
3 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
tem/html/core/head.html
View file

@ -8,8 +8,8 @@
<meta name="description" content="{{ .Desc }}"> <meta name="description" content="{{ .Desc }}">
<meta name="og:image" content="/public/img/knuckles_owo.png"> <meta name="og:image" content="/public/img/knuckles_owo.png">
<link rel="shortcut icon" href="https://media.dof.dev/kit/logo.svg" type="image/svg+xml"> <link rel="shortcut icon" href="https://media.dof.dev/kit/logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="/public/style.css?v4"> <link rel="stylesheet" href="/public/style.css?v5">
<script src="/public/js/mono.js?v1"></script> <script src="/public/js/mono.js?v2"></script>
<link rel="canonical" href="https://{{ .Host }}{{ .PagePath }}"> <link rel="canonical" href="https://{{ .Host }}{{ .PagePath }}">
</head> </head>
@ -81,7 +81,7 @@
gap: 6px; gap: 6px;
" "
> >
<a href="/" class="onpage"> <a href="/">
<img src="/public/img/icons/home.svg?v1" height="32" width="auto" /> <img src="/public/img/icons/home.svg?v1" height="32" width="auto" />
<div>home</div> <div>home</div>
</a> </a>

9
web/public/js/mono.js
View file

@ -16,6 +16,15 @@ document.addEventListener("DOMContentLoaded", () => {
const main_el = elbyid("main"); const main_el = elbyid("main");
const top_img_el = elbyid("top_img"); const top_img_el = elbyid("top_img");
const currentPath = window.location.pathname;
const sideLinks = side_el.getElementsByTagName('a');
for (const link of sideLinks) {
if (link.pathname === currentPath) {
link.classList.add('onpage');
}
}
nav_fade = () => { nav_fade = () => {
if (window.scrollY == 0) { if (window.scrollY == 0) {
if (!side_open) { if (!side_open) {

6
web/public/style.css
View file

@ -134,9 +134,6 @@ body {
margin: 0; margin: 0;
} }
} }
> a.onpage {
background-color: #11111166;
}
> #support { > #support {
display: none; display: none;
} }
@ -144,6 +141,9 @@ body {
display: none; display: none;
} }
} }
#side a.onpage {
background-color: #11111133;
}
#side a:hover { #side a:hover {
background-color: #11111166; background-color: #11111166;
transition: 0.166s; transition: 0.166s;