Create header menu to navigate between pages (#9)

* Create header menu to navigate between pages Add a header menu for navigation between pages `/`, `/statistics`, and `/details`. * **Header Component**: Create a new `Header` component in `webapp/src/components/Header.tsx` with navigation links to `/`, `/statistics`, and `/details`, and a GitHub icon linking to the repository. * **Main Application**: Import and include the `Header` component in `webapp/src/main.tsx` above the `Routes` component. * **Index HTML**: Remove the GitHub icon link from `webapp/index.html`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/kaakaa/ai-agent-statistics?shareId=XXXX-XXXX-XXXX-XXXX). * Add a new `Header` component with a navigation bar * Import `Link` from `react-router` instead of `react-router-dom` * Include a GitHub icon in the navigation bar * Add a new `Header` component with a navigation bar * Create a `Header` component with links to `/`, `/statistics`, and `/details` * Include a GitHub icon that links to the GitHub repository * Set the style for the header as a header line in a row on the top-right corner of the page * Refactor styles for the header to ensure consistency and responsiveness * fix styles * fix style
kaakaa · Jan 5, 2025 · a5bf42c · a5bf42c
1 parent 22b3205
commit a5bf42c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/webapp/index.html b/webapp/index.html
@@ -13,9 +13,6 @@
     </style>
   </head>
   <body>
-    <a href="https://github.com/kaakaa/ai-agent-statistics" class="github-icon">
-      <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="32" height="32">
-    </a>
     <div id="root"></div>
     <script type="module" src="./src/main.tsx"></script>
   </body>

diff --git a/webapp/src/components/Header.tsx b/webapp/src/components/Header.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router';
+import GitHubIcon from '@mui/icons-material/GitHub';
+
+const Header: React.FC = () => {
+  return (
+    <nav style={{ display: 'flex', justifyContent: 'flex-end', position: 'fixed', 'top': 0, 'width': '100%', padding: '10px', backgroundColor: '#343a40'}}>
+      <ul style={{ display: 'flex', listStyle: 'none', margin: 0, padding: 0 }}>
+      <li style={{ margin: '0 10px' }}>
+        <Link to="/" style={{ textDecoration: 'none', color: '#ffffff' }}>Summary</Link>
+      </li>
+      <li style={{ margin: '0 10px' }}>
+        <Link to="/statistics" style={{ textDecoration: 'none', color: '#ffffff' }}>Statistics</Link>
+      </li>
+      <li style={{ margin: '0 10px' }}>
+        <Link to="/details" style={{ textDecoration: 'none', color: '#ffffff' }}>Details</Link>
+      </li>
+      <li style={{ margin: '0 10px' }}>
+        <a href="https://github.com/kaakaa/ai-agent-statistics" target="_blank" rel="noopener noreferrer" style={{ color: '#ffffff' }}>
+        <GitHubIcon />
+        </a>
+      </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Header;
diff --git a/webapp/src/index.css b/webapp/src/index.css
@@ -27,6 +27,7 @@ body {
   display: flex;
   place-items: center;
   min-width: 320px;
+  max-width: 100vw;
   min-height: 100vh;
 }
 

diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
@@ -5,12 +5,14 @@ import './index.css'
 import PullRequestsTable from './components/PullRequests.tsx'
 import StatisticsPage from './components/Statistics.tsx';
 import SummaryPage from './components/Summary.tsx';
+import Header from './components/Header.tsx';
 
 const base = import.meta.env.BASE_URL
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <Router basename={base}>
+      <Header/>
       <Routes>
         <Route path="/" element={<SummaryPage />} />
         <Route path="/statistics" element={<StatisticsPage />} />