Refactoring Sidenav implementation

vnma0 · May 11, 2019 · 7da2c99 · 7da2c99
1 parent 8d4b392
commit 7da2c99
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git 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
@@ -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={() => {