install mui, make navbar

frontend/package.json

@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
     "@tailwindcss/vite": "^4.1.17",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

frontend/src/components/Navbar.tsx

@@ -0,0 +1,8 @@
+export default function Navbar() {
+  return (
+    <div className="flex-row">
+      <button />
+      <button />
+    </div>
+  );
+};

frontend/src/main.tsx

@@ -3,12 +3,16 @@ import { createRoot } from 'react-dom/client'
 import { BrowserRouter, Routes, Route } from 'react-router'
 import './index.css'
 import Home from './pages/Home.tsx'
+import Article from './pages/Article.tsx'
+import Navbar from './components/Navbar.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <Navbar />
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Home />} />
+        <Route path="/article:articleId" element={<Article />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>

frontend/src/pages/Article.tsx

@@ -0,0 +1,7 @@
+export default function Article() {
+  return (
+    <div id="article">
+      <h1>Article</h1>
+    </div>
+  );
+};