64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import { useRef, useEffect } from 'react'
|
|
import { HashRouter as Router, Routes, Route, NavLink } from 'react-router-dom'
|
|
import { LanPage } from './pages/LanPage'
|
|
import { MainRelayPage } from './pages/MainRelayPage'
|
|
import { ElevatorPage } from './pages/ElevatorPage'
|
|
import { DevicePage } from './pages/DevicePage'
|
|
|
|
function Header() {
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
const burgerRef = useRef<HTMLButtonElement>(null)
|
|
|
|
useEffect(() => {
|
|
const burger = burgerRef.current
|
|
if (!burger) return
|
|
burger.addEventListener('click', () => {
|
|
menuRef.current?.classList.toggle('is-active')
|
|
burger.classList.toggle('is-active')
|
|
})
|
|
return () => burger.removeEventListener('click', () => {})
|
|
}, [])
|
|
|
|
return (
|
|
<nav className="navbar is-dark fixed-top" role="navigation" aria-label="main navigation">
|
|
<div className="container">
|
|
<div className="navbar-brand">
|
|
<NavLink to="/" className="navbar-item has-text-weight-bold">
|
|
Config Panel
|
|
</NavLink>
|
|
<button ref={burgerRef} className="navbar-burger" aria-label="menu" aria-expanded="false">
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
<div ref={menuRef} className="navbar-menu">
|
|
<div className="navbar-start">
|
|
<NavLink to="/" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>LAN</NavLink>
|
|
<NavLink to="/relay" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Relay</NavLink>
|
|
<NavLink to="/elevator" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Elevator</NavLink>
|
|
<NavLink to="/device" className="nav-link" onClick={() => { menuRef.current?.classList.remove('is-active'); burgerRef.current?.classList.remove('is-active') }}>Device</NavLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Router>
|
|
<Header />
|
|
<main className="main-content" style={{ paddingTop: '4rem' }}>
|
|
<Routes>
|
|
<Route path="/" element={<LanPage />} />
|
|
<Route path="/relay" element={<MainRelayPage />} />
|
|
<Route path="/elevator" element={<ElevatorPage />} />
|
|
<Route path="/device" element={<DevicePage />} />
|
|
<Route path="*" element={<LanPage />} />
|
|
</Routes>
|
|
</main>
|
|
</Router>
|
|
)
|
|
}
|