Sidebar menu

app/App.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import FontAwesome from 'react-fontawesome';
 
 import './app.global.css';
 import styles from './styles.css';
@@ -14,6 +15,7 @@ import Cover from './components/Cover';
 import PlayerControls from './components/PlayerControls';
 import PlayQueue from './components/PlayQueue';
 import Seekbar from './components/Seekbar';
+import SidebarMenu from './components/SidebarMenu';
 import TrackInfo from './components/TrackInfo';
 import WindowControls from './components/WindowControls';
 
@@ -30,17 +32,28 @@ class App extends React.Component {
           <WindowControls />
         </Navbar>
         <div className={styles.panel_container}>
-          <VerticalPanel className={styles.left_panel}/>
-          <VerticalPanel className={styles.center_panel}/>
+          <VerticalPanel className={styles.left_panel}>
+            <SidebarMenu>
+              <div style={{textAlign: "center"}}><img
+                width="150px"
+                src="./resources/media/nuclear/logo_full_light.png"
+              /></div>
+              <a href="#"><FontAwesome name="dashboard" /> Dashboard</a>
+              <a href="#"><FontAwesome name="download" /> Downloads</a>
+              <a href="#"><FontAwesome name="music" /> Playlists</a>
+              <a href="#"><FontAwesome name="cogs" /> Settings</a>
+            </SidebarMenu>
+          </VerticalPanel>
+          <VerticalPanel className={styles.center_panel} />
           <VerticalPanel className={styles.right_panel}>
-            <PlayQueue items={queueData}/>
+            <PlayQueue items={queueData} />
           </VerticalPanel>
         </div>
         <Footer className={styles.footer}>
           <Seekbar fill="30%"/>
           <div className={styles.footer_horizontal}>
             <div className={styles.track_info_wrapper}>
-              <Cover cover="http://cdn.theobelisk.net/obelisk/wp-content/uploads/2012/01/vol4cover.jpg"/>
+              <Cover cover="http://cdn.theobelisk.net/obelisk/wp-content/uploads/2012/01/vol4cover.jpg" />
               <TrackInfo track="Supernaut" artist="Black Sabbath" />
             </div>
             <PlayerControls />

app/app.global.css

@@ -13,3 +13,8 @@ body {
   height: 100%;
   margin: 0px;
 }
+
+a {
+  color: #f8f8f2;
+  text-decoration: none;
+}

app/components/PlayQueue/QueueItem/styles.css

@@ -29,13 +29,14 @@
 
   white-space: nowrap;
   overflow: hidden;
-text-overflow: ellipsis;
+  text-overflow: ellipsis;
 }
 
 .name_container {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  margin-bottom: 6px;
 }
 
 .artist_container {

app/components/SidebarMenu/SidebarMenuItem/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+class SidebarMenuItem extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className={styles.sidebar_menu_item_container}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default SidebarMenuItem;

app/components/SidebarMenu/SidebarMenuItem/styles.css

@@ -0,0 +1,4 @@
+.sidebar_menu_item_container {
+  flex: 0 0 auto;
+  margin: 12px;
+}

app/components/SidebarMenu/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import styles from './styles.css';
+
+import SidebarMenuItem from './SidebarMenuItem';
+
+class SidebarMenu extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  renderItems(){
+    return this.props.children.map((el, i) => {
+      return (
+        <SidebarMenuItem>
+          {el}
+        </SidebarMenuItem>
+      );
+    });
+  }
+
+  render() {
+    return (
+      <div className={styles.sidebar_menu_container}>
+        { this.renderItems() }
+      </div>
+    );
+  }
+}
+
+export default SidebarMenu;

app/components/SidebarMenu/styles.css

@@ -0,0 +1,5 @@
+.sidebar_menu_container {
+  flex: 1 1 auto;
+  display: flex;
+  flex-flow: column;
+}

app/styles.css

@@ -28,6 +28,8 @@
   width: 300px;
   box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.18), 5px 0px 20px 0px rgba(0, 0, 0, 0.09);
   z-index: 10;
+  display: flex;
+  flex-flow: column;
 }
 
 .center_panel {