70 lines
2 KiB
React
70 lines
2 KiB
React
|
import React from 'react';
|
||
|
|
import { Link } from "gatsby";
|
||
|
|
import logo from "../images/favicon.png";
|
||
|
|
|
||
|
|
export const Navbar = () => {
|
||
|
|
const navbarStyle = {
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
padding: '10px 20px',
|
||
|
|
backgroundColor: '#101010',
|
||
|
|
color: 'white',
|
||
|
|
position: 'fixed',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: '100%',
|
||
|
|
zIndex: 1000,
|
||
|
|
};
|
||
|
|
|
||
|
|
const leftStyle = {
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '15px',
|
||
|
|
fontSize: '20px',
|
||
|
|
fontWeight: 'bold',
|
||
|
|
};
|
||
|
|
|
||
|
|
const rightStyle = {
|
||
|
|
display: 'flex',
|
||
|
|
gap: '20px',
|
||
|
|
};
|
||
|
|
|
||
|
|
const linkStyle = {
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: '10px',
|
||
|
|
color: 'white',
|
||
|
|
textDecoration: 'none',
|
||
|
|
fontSize: '16px',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav style={navbarStyle}>
|
||
|
|
<div style={leftStyle}>
|
||
|
|
{/* Wrap both the logo and text inside the same Link */}
|
||
|
|
<Link to="/" style={linkStyle}>
|
||
|
|
<img src={logo} alt="Logo" style={{ height: '30px' }} />
|
||
|
|
TSP Visualization
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div style={rightStyle}>
|
||
|
|
<Link
|
||
|
|
to="/about"
|
||
|
|
style={linkStyle}
|
||
|
|
onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
|
||
|
|
onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
|
||
|
|
About
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="https://forge.techtransthai.org/deepseekers/traveling-salesman-bangkok"
|
||
|
|
style={linkStyle}
|
||
|
|
onMouseOver={(e) => e.target.style.textDecoration = 'underline'}
|
||
|
|
onMouseOut={(e) => e.target.style.textDecoration = 'none'}>
|
||
|
|
Source Code
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
};
|