mobile navbar
This commit is contained in:
parent
6846632d42
commit
4187790a4b
3 changed files with 163 additions and 1 deletions
124
index.css
124
index.css
|
|
@ -425,3 +425,127 @@ body.light-mode .contact-container h1 {
|
||||||
footer a {
|
footer a {
|
||||||
transition: background-color 0.3s ease, transform 0.15s ease;
|
transition: background-color 0.3s ease, transform 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile Compat */
|
||||||
|
.mobile-nav, .mobile-nav-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
nav ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dark-mode-toggle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav-toggle {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
body.light-mode .mobile-nav-toggle {
|
||||||
|
color: rgb(28, 33, 37);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mobile-nav {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
right: -18rem;
|
||||||
|
width: 18rem;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgb(34, 40, 44);
|
||||||
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
body.light-mode .mobile-nav {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
.mobile-nav.active {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav ul {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mobile-nav li {
|
||||||
|
margin-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav .links {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
.mobile-nav .links a {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
background-color: rgb(44, 49, 54);
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
transition: color 0s;
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
.mobile-nav .links a:hover {
|
||||||
|
background-color: #5865f2;
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
body.light-mode .mobile-nav .links a {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
color: rgb(29, 29, 29);
|
||||||
|
}
|
||||||
|
body.light-mode .mobile-nav .links a:hover {
|
||||||
|
color: white;
|
||||||
|
background-color: #5865f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-mode-toggle-mobile {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: rgb(40, 45, 48);
|
||||||
|
color: white;
|
||||||
|
font-size: 24px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.dark-mode-toggle-mobile:hover {
|
||||||
|
background-color: rgb(28, 33, 37);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.light-mode .dark-mode-toggle-mobile {
|
||||||
|
color: #242424;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
body.light-mode .dark-mode-toggle-mobile:hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
}
|
||||||
25
index.html
25
index.html
|
|
@ -4,6 +4,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Tarions Portfolio</title>
|
<title>Tarions Portfolio</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<link rel="stylesheet" href="index.css">
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
@ -30,8 +31,32 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
|
<button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
|
||||||
|
|
||||||
|
<!-- Mobile Nav -->
|
||||||
|
<button id="mobile-nav-toggle" class="mobile-nav-toggle"><i class="fa-solid fa-bars"></i></i></button>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
<nav id="mobile-nav" class="mobile-nav">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#projects">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#skills">Skills</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
</li>
|
||||||
|
<div class="links">
|
||||||
|
<button id="dark-mode-toggle-mobile" class="dark-mode-toggle-mobile"><i class="fa-solid fa-sun"></i></button>
|
||||||
|
<a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
|
||||||
|
<a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section id="home">
|
<section id="home">
|
||||||
|
|
|
||||||
13
script.js
13
script.js
|
|
@ -1,6 +1,7 @@
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const darkModeButton = document.getElementById("dark-mode-toggle");
|
const darkModeButton = document.getElementById("dark-mode-toggle");
|
||||||
|
const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile");
|
||||||
const body = document.body;
|
const body = document.body;
|
||||||
|
|
||||||
function toggleDarkMode(save){
|
function toggleDarkMode(save){
|
||||||
|
|
@ -23,6 +24,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
toggleDarkMode(true);
|
toggleDarkMode(true);
|
||||||
})
|
})
|
||||||
|
|
||||||
|
mobileDarkModeButton.addEventListener("click", () => {
|
||||||
|
toggleDarkMode(true);
|
||||||
|
})
|
||||||
|
|
||||||
// Add/remove scrolled style to header
|
// Add/remove scrolled style to header
|
||||||
window.addEventListener("scroll", () => {
|
window.addEventListener("scroll", () => {
|
||||||
const header = document.querySelector("header");
|
const header = document.querySelector("header");
|
||||||
|
|
@ -33,4 +38,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||||
header.classList.add("scrolled");
|
header.classList.add("scrolled");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Mobile Nav
|
||||||
|
const mobileNavButton = document.getElementById("mobile-nav-toggle");
|
||||||
|
const mobileNav = document.getElementById("mobile-nav");
|
||||||
|
|
||||||
|
mobileNavButton.addEventListener("click", () => {
|
||||||
|
mobileNav.classList.toggle("active");
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue