chore: update panel-config3

src/App.tsx

@@ -0,0 +1,63 @@
+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>
+  )
+}