jonasjones.dev/src/components/NavBar.svelte
J-onasJones 7e9110d639 Added crucial style related features
Made the following changes:

- Added light-mode that changes based on browser theme
- Fixed style-related issues concerning the projects page
- Refactored code
- Fixed an issue where the LastFM music details were hidden when there was enough space to show them
-
2023-09-27 15:36:14 +02:00

425 lines
8.8 KiB
Svelte

<script>
let showMenu = false;
function toggleMenu() {
showMenu = !showMenu;
}
import TooSmallDimsOverlay from "./TooSmallDimsOverlay.svelte";
let navLinks = [
{ name: "Home", url: "/" },
{ name: "Projects", url: "/projects" },
{ name: "Wiki", url: "https://wiki.jonasjones.dev" },
// just removed this cause it bothered me
//{ name: 'For The Based™', url: '/based'},
//{ name: 'Status', url: '/status'},
{ name: "About", url: "/about" },
];
// @ts-ignore
let miscLinks = [{ name: "For The Based&trade;", url: "/based" }];
const fetch_url =
"https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1";
/**
* @param {string} str
*/
function truncateString(str) {
const max_length = 27;
if (str.length > max_length) {
return str.slice(0, max_length) + "...";
} else {
return str;
}
}
async function fetchLastFmData() {
try {
let response = await fetch(fetch_url);
let data = await response.json();
let album_cover = data.recenttracks.track[0].image[1]["#text"];
let song_title = truncateString(data.recenttracks.track[0].name);
//let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
let artist = truncateString(data.recenttracks.track[0].artist["#text"]);
try {
// @ts-ignore
document.getElementById("lastfm_title").innerHTML = song_title;
// @ts-ignore
document.getElementById("lastfm_artist").innerHTML = artist;
// @ts-ignore
document.getElementById(
"lastfm_logo"
).style.backgroundImage = `url(${album_cover})`;
} catch (error) {}
try {
let is_playing = data.recenttracks.track[0]["@attr"].nowplaying;
if (is_playing == "true") {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src = "/equalizer.gif";
} else {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src =
"/pause-icon-256.png";
}
} catch (error) {
try {
// @ts-ignore
document.getElementById("lastfm_logo_overlay").src =
"/pause-icon-256.png";
} catch (error) {}
}
} catch (error) {}
}
fetchLastFmData();
setInterval(fetchLastFmData, 15000);
</script>
<div class="navbar">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
<div class="hamburger-line line-1" />
<div class="hamburger-line line-2" />
<div class="hamburger-line line-3" />
</div>
<div class="logo">
<a href="/">
<img src="/icon_80x80.webp" alt="Logo" class="logo" />
</a>
</div>
<div class="nav-links">
<nav>
<ul>
{#each navLinks as link}
<li><a href={link.url}>{link.name}</a></li>
{/each}
</ul>
</nav>
</div>
<div class="lastfm">
<a href="https://fm.jonasjones.dev">
<span class="link" />
</a>
<div class="lastfmlogoclass" id="lastfm_logo">
<img src="" alt=" " class="lastfmlogooverlay" id="lastfm_logo_overlay" />
</div>
<div class="lastfm-text">
<p id="lastfm_title" />
<p id="lastfm_artist" />
</div>
</div>
<div class="navigation-menu {showMenu ? 'show' : ''}">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="hamburger-menu close-button {showMenu ? 'open' : ''}"
on:click={toggleMenu}
>
<div class="hamburger-line line-1" />
<div class="hamburger-line line-2" />
<div class="hamburger-line line-3" />
</div>
<ul class="links">
{#each navLinks as link}
<li><a href={link.url} on:click={toggleMenu}>{link.name}</a></li>
{/each}
</ul>
</div>
</div>
<div class="unsupported">
<TooSmallDimsOverlay />
</div>
<style>
.hamburger-menu {
position: relative;
width: 30px;
height: 21.5px;
cursor: pointer;
display: none;
margin: 16px;
}
.hamburger-line {
position: absolute;
width: 100%;
height: 4px;
background-color: var(--header-font-color);
border-radius: 4px;
transition: transform 0.3s, opacity 0.3s;
}
.hamburger-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
.hamburger-line:nth-child(3) {
bottom: 0;
}
.hamburger-menu.open .line-1 {
transform: rotate(-45deg) translate(-6px, 6px);
}
.hamburger-menu.open .line-2 {
opacity: 0;
}
.hamburger-menu.open .line-3 {
transform: rotate(45deg) translate(-6px, -6px);
}
.navigation-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--nav-menu-background-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.navigation-menu.show {
opacity: 1;
pointer-events: auto;
}
.close-button {
position: absolute;
top: 1px;
left: 1px;
font-size: 24px;
color: var(--header-font-color);
cursor: pointer;
}
.links {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.links li {
margin: 10px 0;
}
.links a {
color: var(--header-font-color);
text-decoration: none;
font-size: 18px;
}
.navbar {
background-color: var(--header-background-color);
padding: 10px;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100%;
height: 58px;
display: flex;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
height: 45px;
border-radius: 10px;
margin-top: 3.5px;
}
.nav-links {
display: flex;
justify-content: center;
flex-grow: 1;
}
.nav-links {
margin-top: 5px;
margin-bottom: 5px;
}
nav {
padding: 10px;
justify-content: center;
width: 100%;
display: table;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: var(--header-font-color);
padding: 5px;
font-size: 23px;
}
a:hover {
color: var(--header-font-color-hover);
}
.lastfm {
padding: 3px;
padding-right: 10px;
padding-left: 0;
margin: 0;
justify-content: right;
justify-self: right;
align-items: right;
float: right;
display: flex;
position: relative;
right: 3px;
top: 3.5px;
border-radius: 5px;
max-width: 300px;
height: 43px;
overflow: hidden;
}
.lastfm:hover {
background-color: var(--header-background-color-hover);
}
.lastfm img {
width: 30px;
height: 30px;
border-radius: 10%;
margin-right: 10px;
}
.lastfm #lastfm_logo {
width: 40px;
height: 40px;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10%;
align-items: center;
}
.lastfm #lastfm_artist {
font-size: 13px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_title {
font-size: 19px;
text-align: left;
padding: 0;
margin: 0;
display: flex;
}
.lastfm #lastfm_logo_overlay {
width: 40px;
height: 40px;
margin-right: 10px;
opacity: 0.5;
align-self: center;
}
.lastfm-text {
display: none;
transition: width 0.3s ease-out;
}
.lastfm:hover .lastfm-text {
display:block
}
.link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.unsupported {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 9999;
}
@media only screen and (max-width: 900px) and (min-width: 650px) {
.lastfm {
width: 50px;
}
.navigation-menu {
display: none;
}
}
@media only screen and (max-width: 650px) and (min-width: 375px) {
.lastfm-text {
display: block;
}
.nav-links {
display: none;
}
.lastfm #lastfm_title,
.lastfm #lastfm_artist {
display: flex;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
@media only screen and (max-width: 375px) and (min-width: 300px) {
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
@media only screen and (max-width: 300px) and (min-width: 0px) {
.lastfm {
width: 50px;
}
.nav-links {
display: none;
}
.hamburger-menu {
display: block;
}
.logo {
display: none;
}
}
</style>