From 7da2c9912da960ac4fb322ad003aa5641b45c547 Mon Sep 17 00:00:00 2001
From: Minh Duc Vo <minhducsun2002@gmail.com>
Date: Sat, 11 May 2019 12:58:14 +0700
Subject: [PATCH] Refactoring Sidenav implementation

---
 src/app/sidenav/sidenav.js | 34 +++++++++++++++-------------------
 src/index.js               |  6 +++---
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/app/sidenav/sidenav.js b/src/app/sidenav/sidenav.js
index 93268f2..7f2f60e 100644
--- a/src/app/sidenav/sidenav.js
+++ b/src/app/sidenav/sidenav.js
@@ -17,34 +17,30 @@ class Sidenav extends Component {
             open: false
         };
 
-        toggleSidenav = this.toggle = this.toggle.bind(this);
+        toggleSidenav = this.toggle;
     }
 
-    toggle() {
+    toggle = () => {
         this.setState({
             open: !this.state.open
         });
-    }
+    };
 
-    renderItems() {
-        return this.props.pages.map((entry, index) => {
-            // mirroring onClick function
-            return (
-                <ListItem
-                    component={Link}
-                    to={entry.link}
-                    onClick={entry.page.props.onClick}
-                    button={entry.page.props.button}
-                    key={`navigator_${index}`}>
-                    {entry.page}
-                </ListItem>
-            );
-        });
-    }
     render() {
         return (
             <Drawer anchor='left' {...this.props} open={this.state.open} onClose={this.toggle}>
-                <List>{this.renderItems()}</List>
+                <List>
+                    {this.props.children.map(({ link, page }, index) => (
+                        <ListItem
+                            component={Link}
+                            to={link}
+                            onClick={page.props.onClick}
+                            button={page.props.button}
+                            key={`navigator_${index}`}>
+                            {page}
+                        </ListItem>
+                    ))}
+                </List>
             </Drawer>
         );
     }
diff --git a/src/index.js b/src/index.js
index 01d084e..1ec83fd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -109,8 +109,8 @@ class Hestia extends React.Component {
                     />
                     <div style={{ display: this.state.user.loggedIn ? 'block' : 'none' }}>
                         <div>
-                            <Sidenav
-                                pages={[
+                            <Sidenav>
+                                {[
                                     {
                                         page: <HomepageLauncher button onClick={toggleSidenav} />,
                                         link: '/'
@@ -128,7 +128,7 @@ class Hestia extends React.Component {
                                         link: '/scoreboard'
                                     }
                                 ]}
-                            />
+                            </Sidenav>
                             <Route
                                 path='/'
                                 render={() => {