add header

.vscode/settings.json

@@ -5,6 +5,7 @@
     "source.fixAll.eslint": true
   },
   "cSpell.words": [
+    "bgcolor",
     "flowtype",
     "Parens",
     "precached",

package.json

@@ -15,12 +15,15 @@
     "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\""
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
-    "reactstrap": "^9.1.4",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",
     "typescript": "^4.8.2",
@@ -38,7 +41,6 @@
     "@typescript-eslint/eslint-plugin": "^5.36.1",
     "@typescript-eslint/parser": "^5.36.1",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^5.2.0",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",

public/index.html

@@ -12,7 +12,14 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/header/UIHeader.tsx

@@ -1,57 +1,76 @@
 import React, { Component } from 'react';
 
-import {
-  Collapse,
-  Navbar,
-  NavbarToggler,
-  NavbarBrand,
-  Nav,
-  NavItem,
-  NavLink
-} from 'reactstrap';
-
-import { AppContextProps } from '@/api';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import SearchIcon from '@mui/icons-material/Search';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 
 import logo from '../../assets/images/logo.svg';
-import '../header/style.scss';
 
-export class UIHeader extends Component<AppContextProps> {
-  constructor(props) {
-    super(props);
+import '../header/style.scss';
 
-    this.toggle = this.toggle.bind(this);
+interface HeaderProps {
+  sections: ReadonlyArray<{
+    title: string;
+    url: string;
+  }>;
+  title: string;
+}
 
-    this.state = {
-      isOpen: false
-    };
-  }
-  toggle() {
-    this.setState({
-      isOpen: !this.state
-    });
-  }
+export class UIHeader extends Component<HeaderProps> {
   render() {
-    let name = 'SHDSVN';
+    const { sections, title } = this.props;
+
     return (
-      <div>
-        <Navbar color="light" light expand="md">
-          <NavbarBrand href="/">
+      <React.Fragment>
+        <Toolbar sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Typography
+            component="h1"
+            variant="h5"
+            color="inherit"
+            align="left"
+            noWrap
+            mt={1}
+            sx={{ flex: 1 }}
+          >
+            {title}
+          </Typography>
+          <Typography
+            component="h1"
+            variant="h5"
+            color="inherit"
+            align="left"
+            noWrap
+            mt={1}
+            sx={{ flex: 1 }}
+          >
             <img src={logo} className="App-logo-header" alt="logo" />
-            {name}
-          </NavbarBrand>
-          <NavbarToggler onClick={this.toggle} />
-          <Collapse navbar>
-            <Nav className="ml-auto" navbar>
-              <NavItem></NavItem>
-              <NavItem>
-                <NavLink href="https://github.com/Devteamvietnam/shdsvn.com">
-                  GitHub
-                </NavLink>
-              </NavItem>
-            </Nav>
-          </Collapse>
-        </Navbar>
-      </div>
+          </Typography>
+          <IconButton>
+            <SearchIcon />
+          </IconButton>
+        </Toolbar>
+        <Toolbar
+          component="nav"
+          variant="dense"
+          sx={{ justifyContent: 'space-between', overflowX: 'auto' }}
+        >
+          {sections.map(section => (
+            <Link
+              color="primary"
+              rel="noopener"
+              underline="none"
+              key={section.title}
+              variant="body2"
+              href={section.url}
+              sx={{ p: 2, flexShrink: 0 }}
+            >
+              {section.title}
+            </Link>
+          ))}
+        </Toolbar>
+      </React.Fragment>
     );
   }
 }

src/components/header/style.scss

@@ -1,5 +1,5 @@
 .App-logo-header {
-  height: 5vmin;
+  height: 6vmin;
   pointer-events: stroke;
 }
 

src/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './stylesheet.scss';
 
 import reportWebVitals from './reportWebVitals';
 import * as serviceWorker from './serviceWorker';

src/pages/App.scss

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 80vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/pages/index.tsx

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material/Container';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
 import { AppContext } from '../api';
 
 import { App } from './UIApp';
 
-import { UIComponent } from '../components';
-
-import 'bootstrap/dist/css/bootstrap.min.css';
+import { UIHeader } from '../components/header/UIHeader';
 
 export class UIPages extends Component {
   appContext: AppContext;
@@ -17,13 +19,27 @@ export class UIPages extends Component {
   }
 
   render() {
+    const theme = createTheme();
+
+    const sections = [
+      { title: 'Home', url: '#' },
+      { title: 'Blog', url: '#' },
+      { title: 'Project', url: '#' },
+      { title: 'About', url: '#' }
+    ];
+
     let event = this.appContext.consumeEvent();
 
     return (
-      <div className="ui-application">
-        <UIComponent />
-        <App appContext={this.appContext} event={event} />
-      </div>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Container maxWidth="lg">
+          <UIHeader sections={sections} title={'SHDSVN'} />
+          <main>
+            <App appContext={this.appContext} event={event} />
+          </main>
+        </Container>
+      </ThemeProvider>
     );
   }
 }