Added styling to navbar.

backend/index.js

@@ -227,7 +227,7 @@ async.waterfall([
 				fs.access(rootDirAssets + path, function(err) {
 					console.log("Error: ", !!err);
 					if (!err) {
-						res.json({});
+						res.sendFile(rootDirAssets + path);
 					} else {
 						res.redirect("/");
 					}

frontend/app/js/components/Global/Navbar.jsx

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { translate } from "react-i18next";
 
+import "navbar.scss";
+
 @connect(state => ({
 	loggedIn: state.user.get("loggedIn"),
 }))
@@ -19,20 +21,48 @@ export default class Menu extends Component {
 		t: () => {},
 	};
 
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			showNavbar: false,
+		};
+	}
+
 	getLink(to, text, canShow = true) {
-		return (canShow) ? <NavLink to={ to } >{ text }</NavLink> : "";
+		return (canShow) ? <NavLink to={ to } onClick={ this.closeNavbar } >{ text }</NavLink> : "";
+	}
+
+	toggleNavbar = () => {
+		this.setState({
+			showNavbar: !this.state.showNavbar,
+		});
+	}
+
+	closeNavbar = () => {
+		this.setState({
+			showNavbar: false,
+		});
 	}
 
 	render() {
 		const { t } = this.props;
 
 		return (
-			<header className="Menu">
-				{this.getLink("/", t("navbar:home"))}
-				{this.getLink("/login", t("navbar:login"), !this.props.loggedIn)}
-				{this.getLink("/register", t("navbar:register"), !this.props.loggedIn)}
-				{this.getLink("/settings", t("navbar:settings"), this.props.loggedIn)}
-				{this.getLink("/logout", t("navbar:logout"), this.props.loggedIn)}
+			<header>
+				{this.getLink("/", <img src="/assets/images/wordmark-white.svg" />)}
+				<button className="hamburger" onClick={ this.toggleNavbar }>
+					<span></span>
+					<span></span>
+					<span></span>
+				</button>
+				<navbar className={ (this.state.showNavbar) ? "show" : "" }>
+					{this.getLink("/", t("navbar:home"))}
+					{this.getLink("/login", t("navbar:login"), !this.props.loggedIn)}
+					{this.getLink("/register", t("navbar:register"), !this.props.loggedIn)}
+					{this.getLink("/settings", t("navbar:settings"), this.props.loggedIn)}
+					{this.getLink("/logout", t("navbar:logout"), this.props.loggedIn)}
+				</navbar>
 			</header>
 		);
 	}

frontend/app/styles/_breakpoints.scss

@@ -0,0 +1,31 @@
+@mixin responsive($breakpoint) {
+  @if $breakpoint == "smallest" {
+	@media (min-width: 320px) {
+	  @content;
+	}
+  }
+
+  @else if $breakpoint == "small" {
+	@media (min-width: 600px) {
+	  @content;
+	}
+  }
+
+  @else if $breakpoint == "medium" {
+	@media (min-width: 900px) {
+	  @content;
+	}
+  }
+
+  @else if $breakpoint == "large" {
+	@media (min-width: 1200px) {
+	  @content;
+	}
+  }
+
+  @else if $breakpoint == "largest" {
+	@media (min-width: 1800px) {
+	  @content;
+	}
+  }
+}

frontend/app/styles/_colors.scss

@@ -0,0 +1,4 @@
+$musare_color_primary_blue: #2FBEFF;
+$musare_color_secondary_blue: #00AFFF;
+$musare_color_white: #FFFFFF;
+$musare_shadow_color: hsla(0, 0, 0, .2);

frontend/app/styles/main.scss

@@ -1,2 +1,18 @@
 // @import "musare-theme";
 
+html, body {
+	margin: 0;
+	padding: 0;
+	font-family: "Segoe UI";
+}
+
+* {
+	padding: 0;
+	margin: 0;
+}
+
+button {
+	outline: none;
+	box-shadow: none;
+	border: none;
+}

frontend/app/styles/navbar.scss

@@ -0,0 +1,223 @@
+@import "colors";
+@import "breakpoints";
+
+header {
+	background-color: $musare_color_primary_blue;
+	display: flex;
+	justify-content: space-between;
+
+	> a {
+		img {
+			height: 100%;
+		}
+	}
+
+	.hamburger {
+		background-color: $musare_color_primary_blue;
+		transition: .1s ease;
+
+		&:hover, &:focus {
+			background-color: $musare_color_secondary_blue;
+			cursor: pointer;
+		}
+
+		span {
+			background-color: $musare_color_white;
+			display: flex;
+			margin-left: auto;
+			margin-right: auto;
+			box-shadow: 0 3px 6px $musare_shadow_color;
+		}
+	}
+
+	navbar {
+		background-color: $musare_color_primary_blue;
+		display: flex;
+
+		a {
+			color: $musare_color_white;
+			text-shadow: 0 3px 6px $musare_shadow_color;
+			display: inline-block;
+			text-decoration: none;
+			text-align: center;
+
+			transition: .1s ease;
+
+			&:hover, &:focus {
+				background-color: $musare_color_secondary_blue;
+				cursor: pointer;
+			}
+		}
+	}
+}
+
+@include responsive(smallest) {
+	$height: 64px;
+
+	header {
+		height: $height;
+
+		> a {
+			height: 38px;
+			margin: 13px;
+		}
+
+		.hamburger {
+			height: $height;
+			width: $height;
+
+			span {
+				width: 34px;
+				height: 2px;
+
+				&:nth-child(2) {
+					margin-top: 11px;
+				}
+
+				&:nth-child(3) {
+					margin-top: 11px;
+				}
+			}
+		}
+
+		navbar {
+			visibility: hidden;
+			display: none;
+			width: 100%;
+			height: calc(100% - #{$height});
+			flex-direction: column;
+			position: absolute;
+			top: $height;
+
+			&.show {
+				visibility: visible;
+				display: flex;
+			}
+
+			a {
+				width: 100%;
+				height: $height;
+				line-height: $height;
+				font-size: 27px;
+			}
+		}
+	}
+}
+
+@include responsive(small) {
+	$height: 120px;
+
+	header {
+		height: $height;
+
+		> a {
+			height: 64px;
+			margin: 28px;
+		}
+
+		.hamburger {
+			height: $height;
+			width: $height;
+
+			span {
+				width: 64px;
+				height: 3px;
+
+				&:nth-child(2) {
+					margin-top: 22px;
+				}
+
+				&:nth-child(3) {
+					margin-top: 22px;
+				}
+			}
+		}
+
+		navbar {
+			top: $height;
+			height: calc(100% - #{$height});
+
+			a {
+				height: $height;
+				line-height: $height;
+				font-size: 51px; //TODO Change this
+			}
+		}
+	}
+}
+
+@include responsive(medium) {
+	$height: 180px;
+
+	header {
+		height: $height;
+
+		> a {
+			height: 106px;
+			margin: 37px;
+		}
+
+		.hamburger {
+			height: $height;
+			width: $height;
+
+			span {
+				width: 96px;
+				height: 4px;
+
+				&:nth-child(2) {
+					margin-top: 33px;
+				}
+
+				&:nth-child(3) {
+					margin-top: 33px;
+				}
+			}
+		}
+
+		navbar {
+			top: $height;
+			height: calc(100% - #{$height});
+
+			a {
+				height: $height;
+				line-height: $height;
+				font-size: 76px; //TODO Change this
+			}
+		}
+	}
+}
+
+@include responsive(large) {
+	$height: 80px;
+
+	header {
+		height: $height;
+
+		> a {
+			height: 50px;
+			margin: 15px;
+		}
+
+		.hamburger {
+			visibility: hidden;
+			display: none;
+		}
+
+		navbar {
+			visibility: unset;
+			display: flex;
+			flex-direction: row;
+			height: $height;
+			width: unset;
+			position: unset;
+
+			a {
+				height: $height;
+				line-height: $height;
+				font-size: 27px;
+				padding: 0 20px;
+			}
+		}
+	}
+}

frontend/webpack.config.js

@@ -144,6 +144,7 @@ module.exports = {
 			path.resolve(__dirname, "node_modules"),
 			path.resolve(__dirname, "./app/js"),
 			path.resolve(__dirname, "./"),
+			path.resolve(__dirname, "./app/styles"),
 		],
 	},
 	plugins,