arthur/portfolio2023
1
0
Fork 0
mirror of https://github.com/arthur-pbty/portfolio2023.git synced 2026-06-12 15:56:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

create nav barre for phone

Browse Source
This commit is contained in:
Tutur33
2023-11-25 23:33:09 +01:00
parent b69e5e88b5
commit 08713671b4
30 changed files with 105 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/index.css
+34 -2
View File
@@ -60,7 +60,7 @@ body {
display: none;
height: 70px;
position: fixed;
width: 100%;
width: calc(100% - 100px);
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1);
@@ -77,6 +77,12 @@ body {
text-align: center;
}
.depli-nav {
background: none;
border: none;
cursor: pointer;
}
main,
section {
margin: 100px 100px 100px;
@@ -174,6 +180,32 @@ main {
h1 {
margin-top: 80px;
}
.mini-nav {
justify-content: space-between;
}
#nav a {
padding: 5px 15px;
}
#nav a:hover {
padding: 5px 14px;
}
#nav ul {
width: 300px;
display: flex;
justify-content: space-between;
}
.nav-dark {
background-color: #1c1c1e;
}
.nav-light {
background-color: #fefefe;
}
}
@media (max-width: 940px) {
@@ -272,7 +304,7 @@ main {
.btn_theme:hover {
border: 1px solid rgb(83, 83, 83);
border-radius: 5px;
padding: 5px 14px;
padding: 4px 14px;
}
#text {
resources/js/index.js
+14
View File
@@ -3,21 +3,35 @@ import '../css/index.css'
const toggleBtn = document.getElementById("toggle-btn");
const body = document.querySelector("body");
const text = document.getElementById("text");
const mini_nav = document.getElementById("mini-nav");
const mini_nav_depli = document.getElementById("nav");
let darkmode = localStorage.getItem("dark-mode");
const enableDarkMode=() =>{
body.classList.add("dark-mode-theme");
mini_nav.classList.add("nav-dark");
mini_nav_depli.classList.add("nav-dark");
mini_nav.classList.remove("nav-light");
mini_nav_depli.classList.remove("nav-light");
toggleBtn.classList.add("dark-mode-toggle");
toggleBtn.style.color = "rgb(177, 177, 177)";
text.innerHTML="sombre";
localStorage.setItem("dark-mode" , "enabled")
}
const disableDarkMode= () =>{
body.classList.remove("dark-mode-theme");
mini_nav.classList.remove("nav-dark");
mini_nav_depli.classList.remove("nav-dark");
mini_nav.classList.add("nav-light");
mini_nav_depli.classList.add("nav-light");
toggleBtn.classList.remove("dark-mode-toggle");
toggleBtn.style.color = "rgb(83, 83, 83)";
text.innerHTML="claire";
localStorage.setItem("dark-mode" , "disabled")
}
resources/views/index.edge
+4 -4
View File
@@ -9,7 +9,7 @@
@entryPointScripts('index')
</head>
<body>
<nav id="nav" class="fixed-navbar">
<nav id="nav" class="fixed-navbar nav-light">
<ul class="nav-lien">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
@@ -30,9 +30,9 @@
@end
</ul>
</nav>
<nav class="mini-nav">
<button id="depli-nav">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<nav class="mini-nav nav-light" id="mini-nav">
<button class="depli-nav" id="depli-nav">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 30 24">
<rect width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="10" width="30" height="4" rx="2" ry="2" fill="#000" />
<rect y="20" width="30" height="4" rx="2" ry="2" fill="#000" />