2761857b0d
- Implemented `owl_to_mermaid.py` to convert OWL/Turtle files into Mermaid class diagrams. - Implemented `owl_to_plantuml.py` to convert OWL/Turtle files into PlantUML class diagrams. - Added two new PlantUML files for custodian multi-aspect diagrams.
84 lines
3.9 KiB
TypeScript
84 lines
3.9 KiB
TypeScript
/**
|
|
* Navigation Component
|
|
* Styled following Netwerk Digitaal Erfgoed (NDE) house style
|
|
*/
|
|
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import './Navigation.css';
|
|
|
|
export function Navigation() {
|
|
const location = useLocation();
|
|
|
|
const isActive = (path: string) => {
|
|
return location.pathname === path;
|
|
};
|
|
|
|
return (
|
|
<nav className="navigation">
|
|
<div className="nav-container">
|
|
<Link to="/" className="nav-brand">
|
|
{/* NDE Logo */}
|
|
<svg
|
|
className="nav-logo"
|
|
alt="Netwerk Digitaal Erfgoed Logo"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 0 243.5 400.5"
|
|
xmlSpace="preserve"
|
|
>
|
|
<g>
|
|
<rect className="line-e" fill="#0a3dfa" x="53.107" y="197.661" width="138.77" height="4.763"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="148.123" y="188.302" transform="matrix(-0.9808 0.1951 -0.1951 -0.9808 373.0271 344.6246)" width="42.837" height="4.762"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="145.396" y="179.305" transform="matrix(-0.9239 0.3827 -0.3827 -0.9239 390.4592 285.704)" width="42.837" height="4.762"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="140.965" y="171.012" transform="matrix(-0.8315 0.5556 -0.5556 -0.8315 393.7336 227.3473)" width="42.838" height="4.761"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="134.994" y="163.743" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 384.477 172.9961)" width="42.833" height="4.762"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="127.729" y="157.775" transform="matrix(-0.5556 0.8315 -0.8315 -0.5556 365.1757 125.1258)" width="42.837" height="4.762"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="119.434" y="153.343" transform="matrix(-0.3827 0.9239 -0.9239 -0.3827 338.6234 85.1853)" width="42.836" height="4.762"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="110.427" y="150.613" transform="matrix(-0.195 0.9808 -0.9808 -0.195 307.6125 53.5162)" width="42.835" height="4.761"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="120.111" y="130.657" width="4.763" height="42.833"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="110.757" y="131.578" transform="matrix(-0.9808 0.1951 -0.1951 -0.9808 253.9574 280.9728)" width="4.761" height="42.836"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="101.76" y="134.307" transform="matrix(-0.9238 0.3828 -0.3828 -0.9238 259.9637 259.7166)" width="4.761" height="42.836"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="93.468" y="138.739" transform="matrix(-0.8315 0.5555 -0.5555 -0.8315 264.5174 240.0869)" width="4.762" height="42.837"/>
|
|
<rect className="line-e" fill="#0a3dfa" x="86.192" y="144.706" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 268.6692 220.9577)" width="4.762" height="42.832"/>
|
|
</g>
|
|
</svg>
|
|
<span className="nav-title">NDE HC Ontology</span>
|
|
</Link>
|
|
|
|
<div className="nav-links">
|
|
<Link
|
|
to="/"
|
|
className={`nav-link ${isActive('/') ? 'active' : ''}`}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
to="/visualize"
|
|
className={`nav-link ${isActive('/visualize') ? 'active' : ''}`}
|
|
>
|
|
Visualize
|
|
</Link>
|
|
<Link
|
|
to="/database"
|
|
className={`nav-link ${isActive('/database') ? 'active' : ''}`}
|
|
>
|
|
Database
|
|
</Link>
|
|
<Link
|
|
to="/query-builder"
|
|
className={`nav-link ${isActive('/query-builder') ? 'active' : ''}`}
|
|
>
|
|
Query Builder
|
|
</Link>
|
|
<Link
|
|
to="/settings"
|
|
className={`nav-link ${isActive('/settings') ? 'active' : ''}`}
|
|
>
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|