menu bar

client/package.json

@@ -11,6 +11,7 @@
     "antd": "^4.5.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "typescript": "^3.9.7"
   },

client/src/App.css

@@ -1 +1,22 @@
-@import '~antd/dist/antd.css';
+@import '~antd/dist/antd.css';
+
+.menu {
+    overflow: hidden;
+    padding-top: 60px;
+    padding-left: 20px;
+    position: fixed;
+    background: rgba(240, 240, 240);
+
+    width: 100%;
+}
+
+h1 {
+    padding-top: 110px;
+    padding-left: 40px;
+}
+h2 {
+    padding-left: 40px;
+}
+p {
+    padding-left: 40px;
+}

client/src/App.js

@@ -4,6 +4,93 @@ import './App.css';
 import Header from './components/header/Header';
 import Quiz from './components/quiz/Quiz';
 
+import Logo from './quizLogo.svg';
+
+import { Menu } from 'antd';
+import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+
+
+
+const { SubMenu } = Menu;
+
+class App extends React.Component {
+
+
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      current: 'mail',
+      quiz: '2'
+    };
+
+}
+
+
+  handleClick = e => {
+
+    console.log('click ', e.key);
+    //this.setState({ current: e.key });
+    this.setState({ quiz: e.key })
+
+  };
+
+  onSearch(term){
+    console.log("Search on term" + term);
+  }
+
+  render() {
+    const { current } = this.state;
+    return (
+      <div>
+
+        <Header logo={Logo} title="Quiz Master" onSearchClick={this.onSearch} />
+
+        <Menu className="menu" style={{ zIndex: '50' }} onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
+          <Menu.Item key="mail" icon={<MailOutlined />}>
+            Navigation One
+        </Menu.Item>
+          <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
+            Navigation Two
+        </Menu.Item>
+          <SubMenu icon={<SettingOutlined />} title="Choose a quiz">
+            <Menu.ItemGroup title="Item 1">
+              <Menu.Item key="1">Quiz 1</Menu.Item>
+              <Menu.Item key="2">Quiz 2</Menu.Item>
+            </Menu.ItemGroup>
+            <Menu.ItemGroup title="Item 2">
+              <Menu.Item key="setting:3">Option 3</Menu.Item>
+              <Menu.Item key="setting:4">Option 4</Menu.Item>
+            </Menu.ItemGroup>
+          </SubMenu>
+          <Menu.Item key="alipay">
+            <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+              Navigation Four - Link
+          </a>
+          </Menu.Item>
+        </Menu>
+
+
+        <div>
+          <Quiz quizNum={this.state.quiz} />
+        </div>
+
+
+
+
+
+      </div>
+    );
+  }
+}
+
+export default App;
+
+
+
+
+/*
+
 class App extends Component {
 
   constructor(props) {
@@ -17,10 +104,13 @@ class App extends Component {
 
       <div style={{ background: '#EBEBEB', padding: '30px' }}>
         <Header message="Welcome to QuizMaster" />
-        <Quiz quizNum='2' />
+        <Quiz quizNum='3' />
       </div>
     );
   }
 }
 
 export default App;
+
+
+*/

client/src/components/header/Header.css

@@ -1,7 +1,7 @@
 .header {
     overflow: hidden;
     background-color: #05386b;
-    padding: 20px 10px;
+    padding: 5px 10px;
     position: fixed;
     top: 0;
     left: 0;