kevin/portfolio
1
0
Fork 0
Code

Add dark mode button (hidden)

Browse Source
This commit is contained in:
PA4KEV 2023-05-23 10:12:49 +02:00
parent c397062635
commit 93eac60197
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/UI/Navigation.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import './Navigation.css'; import './Navigation.css';
@ -7,12 +7,27 @@ import './Navigation.css';
let section = window.location.pathname.split('/')[2]; let section = window.location.pathname.split('/')[2];
let chapter = window.location.pathname.split('/')[3]; let chapter = window.location.pathname.split('/')[3];
const Navigation = (props) => { const Navigation = () => {
const [theme, setTheme] = useState(
localStorage.getItem('theme') || 'light'
);
useEffect(() => {
localStorage.setItem('theme', theme);
document.body.className = theme;
}, [theme]);
const toggleTheme = () => {
setTheme((theme === 'light') ? 'dark' : 'light');
}
return ( return (
<nav className="navbar navbar-expand-lg fixed-top text-light navbar-dark bg-primary"> <nav className={`navbar navbar-expand-lg fixed-top text-${theme} navbar-${theme} bg-${theme}`}>
<div className="container-fluid"> <div className="container-fluid">
<a className="navbar-brand" href="/">Kevin Matsubara<br/><span className='logo-sub'>Software Developer</span></a> <a className="navbar-brand" href="/">Kevin Matsubara<br/><span className='logo-sub'>Software Developer</span></a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div className="collapse navbar-collapse" id="navbarSupportedContent"> <div className="collapse navbar-collapse" id="navbarSupportedContent">
@ -45,6 +60,7 @@ const Navigation = (props) => {
</li> </li>
} }
</ul> </ul>
<button style={{display: 'none'}} onClick={toggleTheme} type="button" className={`btn btn-${theme}`}>Toggle Theme</button>
{/* <form className="d-flex" role="search"> {/* <form className="d-flex" role="search">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/> <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success" type="submit">Search</button> <button className="btn btn-outline-success" type="submit">Search</button>