Added Station Header

backend/app.js

@@ -5,7 +5,7 @@ const path = require('path'),
       fs   = require('fs'),
       os   = require('os');
 
-process.env.NODE_CONFIG_DIR = `${process.cwd()}/backend/config`;
+process.env.NODE_CONFIG_DIR = `${process.cwd()}/config`;
 
 // npm modules
 const express          = require('express'),

frontend/components/MainHeader.vue

@@ -2,7 +2,7 @@
 	<nav class="navbar navbar-default">
 		<div class="container-fluid">
 			<div class="navbar-header">
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
 					<span class="sr-only">Toggle navigation</span>
 					<span class="icon-bar"></span>
 					<span class="icon-bar"></span>
@@ -10,7 +10,7 @@
 				</button>
 				<a class="navbar-brand" href="#" v-link="{ path: '/' }">Musare</a>
 			</div>
-			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+			<div class="collapse navbar-collapse" id="main-navbar">
 				<ul class="nav navbar-nav navbar-right">
 					<li><a href="#">The Project</a></li>
 					<li><a href="#">Donate</a></li>
@@ -29,7 +29,7 @@
 		border: 0;
 		border-radius: 0;
 		margin: 0;
-		height: 64px;
+		min-height: 64px;
 
 		.navbar-brand, li a, li a:hover, li a:focus {
 			line-height: 64px;

frontend/components/StationHeader.vue

@@ -0,0 +1,84 @@
+<template>
+	<nav class="navbar navbar-default" role="navigation">
+		<div class="container-fluid">
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#station-navbar" aria-expanded="false">
+					<span class="sr-only">Toggle navigation</span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				</button>
+			</div>
+			<div class="collapse navbar-collapse" id="station-navbar">
+				<ul class="nav navbar-nav">
+					<li class="pull-left"><a href="#"><i class="material-icons left">home</i></a></li>
+					<li class="pull-left"><a href="#"><i class="material-icons left">playlist_add</i></a></li>
+					<li class="pull-left"><a href="#"><i class="material-icons left">flag</i></a></li>
+					<li class="pull-left"><a href="#"><i class="material-icons left">skip_next</i></a></li>
+					<li class="pull-center"><a href="#">Station Name</a></li>
+					<li class="pull-right"><a href="#"><i class="material-icons">queue_music</i></a></li>
+					<li class="pull-right"><a href="#"><i class="material-icons">chat</i></a></li>
+					<li class="pull-right"><a href="#"><i class="material-icons">people</i></a></li>
+				</ul>
+			</div>
+		</div>
+	</nav>
+</template>
+
+<style lang="sass" scoped>
+	.navbar-default {
+		background-color: #0091ea;
+		border: 0;
+		border-radius: 0;
+		margin: 0;
+		min-height: 64px;
+
+		.navbar-nav {
+			width: 100%;
+			text-align: center;
+
+			li a, li a:hover, li a:focus {
+				padding: 0px 10px;
+				margin: 0px;
+				color: #fff;
+			}
+
+			li.pull-center a {
+				line-height: 64px;
+			}
+
+			li.pull-right, li.pull-left {
+				height: 64px;
+				display: flex;
+				align-items: center;
+			}
+
+			li {
+				float: none;
+				display: inline-block;
+
+				i {
+					font-size: 40px;
+				}
+
+				&:hover {
+					background-color: rgba(0, 0, 0, 0.1);
+					color: #fff;
+				}
+			}
+		}
+
+		.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
+			border: 0;
+			background: 0;
+
+			.icon-bar {
+				background-color: #fff;
+			}
+		}
+
+		.navbar-collapse {
+			border: 0;
+		}
+	}
+</style>

frontend/components/pages/Station.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-header></main-header>
+	<station-header></station-header>
 	<div class="station">
 		<div class="row">
 			<div class="col-md-8 col-md-push-2 col-sm-10 col-sm-push-1 col-xs-12 video-col">
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-	import MainHeader from '../MainHeader.vue'
+	import StationHeader from '../StationHeader.vue'
 	import MainFooter from '../MainFooter.vue'
 
 	export default {
@@ -207,7 +207,7 @@
 				firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 			});
 		},
-		components: { MainHeader, MainFooter }
+		components: { StationHeader, MainFooter }
 	}
 </script>