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 {
|
||||
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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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="index.css">
|
||||
|
|
@ -30,8 +31,32 @@
|
|||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</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>
|
||||
<section id="home">
|
||||
|
|
|
|||
15
script.js
15
script.js
|
|
@ -1,6 +1,7 @@
|
|||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const darkModeButton = document.getElementById("dark-mode-toggle");
|
||||
const mobileDarkModeButton = document.getElementById("dark-mode-toggle-mobile");
|
||||
const body = document.body;
|
||||
|
||||
function toggleDarkMode(save){
|
||||
|
|
@ -21,7 +22,11 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
darkModeButton.addEventListener("click", () => {
|
||||
toggleDarkMode(true);
|
||||
})
|
||||
})
|
||||
|
||||
mobileDarkModeButton.addEventListener("click", () => {
|
||||
toggleDarkMode(true);
|
||||
})
|
||||
|
||||
// Add/remove scrolled style to header
|
||||
window.addEventListener("scroll", () => {
|
||||
|
|
@ -33,4 +38,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
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