mirror of
https://github.com/runyanjake/jakesphotos.git
synced 2025-10-04 23:47:30 -07:00
Add light and dark github logo
This commit is contained in:
parent
8843034a15
commit
60c7ccb7cc
@ -2,8 +2,13 @@ import React from 'react';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import './Navbar.css';
|
import './Navbar.css';
|
||||||
import logo from './static/navbar-logo.png';
|
import logo from './static/navbar-logo.png';
|
||||||
|
import github_dark from './static/github-dark.png';
|
||||||
|
import github_light from './static/github-light.png';
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
const githubIcon = isDarkMode ? github_light : github_dark; //Icons are on dark background.
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="navbar">
|
<nav className="navbar">
|
||||||
<div className="navbar-logo">
|
<div className="navbar-logo">
|
||||||
@ -12,14 +17,11 @@ const Navbar = () => {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="navbar-title">
|
<div className="navbar-title">
|
||||||
<h1>Photography Portfolio</h1>
|
<h1>Jake Runyan Photography</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="navbar-icons">
|
<div className="navbar-icons">
|
||||||
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
|
<a href="https://github.com/runyanjake/jakesphotos" target="_blank" rel="noopener noreferrer">
|
||||||
<img src="path/to/github-icon.png" alt="GitHub" className="icon" />
|
<img src={githubIcon} alt="GitHub" className="icon" />
|
||||||
</a>
|
|
||||||
<a href="https://www.instagram.com/yourusername" target="_blank" rel="noopener noreferrer">
|
|
||||||
<img src="path/to/instagram-icon.png" alt="Instagram" className="icon" />
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
BIN
src/components/static/github-dark.png
Normal file
BIN
src/components/static/github-dark.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
BIN
src/components/static/github-light.png
Normal file
BIN
src/components/static/github-light.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.4 KiB |
Loading…
x
Reference in New Issue
Block a user