with functional components

package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "gh-pages": "^2.0.1",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,88 +1,75 @@
-import React, { Component } from "react";
-import TopBar from "./components/TopBar";
-import FooterMenu from "./components/FooterMenu";
+import React, { useState, useEffect } from 'react';
 import Content from "./components/Content";
+import FooterMenu from "./components/FooterMenu";
 import Sidebar from "./components/Sidebar";
+import TopBar from "./components/TopBar";
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      windowWidth: 0,
-      windowHeight: 0
-    };
-  }
-
-  componentDidMount() {
-    this.updateDimensions();
-    window.addEventListener("resize", this.updateDimensions.bind(this));
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.updateDimensions.bind(this));
-  }
-
-  updateDimensions() {
-    let windowWidth = typeof window !== "undefined" ? window.innerWidth : 0;
-    let windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
-
-    this.setState({ windowWidth, windowHeight });
-  }
-
-  render() {
-    const { windowWidth } = this.state;
-
+function App() {
+    const [windowState, setWindowState] = useState(
+      {
+        height: window.innerHeight,
+        width: window.innerWidth
+      }
+    );
+    const menuItems = [
+      { icon: `😀`, text: "Item 1" },
+      { icon: `😉`, text: "Item 2" },
+      { icon: `😎`, text: "Item 3" },
+      { icon: `🤔`, text: "Item 4" },
+      { icon: `😛`, text: "Item 5" }
+    ];
+    const sidebarCollapsed = windowState.width < 1100;
     const styles = {
       white: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
       black: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
       topBarHeight: 40,
       footerMenuHeight: 50,
-      showFooterMenuText: windowWidth > 500,
-      showSidebar: windowWidth > 768,
-      sidebarWidth: windowWidth < 1100 ? 50 : 150,
-      sidebarCollapsed: windowWidth < 1100
+      showFooterMenuText: windowState.width > 500,
+      showSidebar: windowState.width > 768,
+      sidebarCollapsed,
+      sidebarWidth: sidebarCollapsed ? 50 : 150
     };
 
-    const menuItems = styles.showSidebar
-      ? [
-          { icon: `😀`, text: "Item 1" },
-          { icon: `😉`, text: "Item 2" },
-          { icon: `😎`, text: "Item 3" },
-          { icon: `🤔`, text: "Item 4" },
-          { icon: `😛`, text: "Item 5" },
-          { icon: `😺️`, text: "Profile" },
-          { icon: `⚙`, text: "Settings" }
-        ]
-      : [
-          { icon: `😀`, text: "Item 1" },
-          { icon: `😉`, text: "Item 2" },
-          { icon: `😎`, text: "Item 3" },
-          { icon: `🤔`, text: "Item 4" },
-          { icon: `😛`, text: "Item 5" }
-        ];
+    useEffect(() => {
+      function handleResize() {
+        setWindowState(
+          {
+            height: window.innerHeight,
+            width: window.innerWidth
+          }
+        )
+      }
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    })
+
+    if (styles.showSidebar) {
+      menuItems.push({ icon: `😺️`, text: "Profile" });
+      menuItems.push({ icon: `⚙`, text: "Settings" });
+    }
 
     return (
       <div
-        style={{
-          backgroundColor: styles.black(0.05),
-          minHeight: "100vh",
-          position: "relative"
-        }}
+        style={
+          {
+            backgroundColor: styles.black(0.05),
+            minHeight: "100vh",
+            position: "relative"
+          }
+        }
       >
-        {styles.showSidebar ? (
-          <Sidebar menuItems={menuItems} styles={styles} />
-        ) : (
-          <TopBar styles={styles} />
-        )}
+        {
+          styles.showSidebar ? (<Sidebar menuItems={menuItems} styles={styles} />) : 
+                               (<TopBar styles={styles} />)
+        }
 
         <Content styles={styles} />
 
-        {!styles.showSidebar && (
-          <FooterMenu menuItems={menuItems} styles={styles} />
-        )}
+        {!styles.showSidebar && (<FooterMenu menuItems={menuItems} styles={styles} />)}
       </div>
     );
-  }
 }
 
 export default App;

src/components/Sidebar.js

@@ -33,12 +33,14 @@ const Sidebar = ({ menuItems, styles }) => {
   return (
     <div style={sidebarStyle}>
       <div style={logoStyle}>{styles.sidebarCollapsed ? "A" : "App"}</div>
-      {menuItems.map(item => (
-        <div style={menuItemStyle}>
-          <span style={iconStyle}>{item.icon}</span>
-          {!styles.sidebarCollapsed && item.text}
-        </div>
-      ))}
+        {
+          menuItems.map((item, index) => (
+            <div style={menuItemStyle} key={index}>
+              <span style={iconStyle}>{item.icon}</span>
+              {!styles.sidebarCollapsed && item.text}
+            </div>
+          ))
+        }
     </div>
   );
 };