Layout and Page improvements

src/App.tsx

 import * as React from "react";
+import { Data } from "./core";
 import { AppNavigator, AppNavigatorRoute } from "./ui/navigation/AppNavigator";
 import { Course } from "./ui/pages/course/Course";
 import { Courses } from "./ui/pages/courses/Courses";
@@ -58,6 +59,8 @@ const routes: Array<AppNavigatorRoute<any>> = [
 	}
 ];
 
+Data.Store.INSTANCE = new Data.Store();
+
 class App extends React.Component {
 	public render() {
 		return <AppNavigator routes={routes} />;

src/core/data/Store.ts

@@ -16,12 +16,4 @@ export class Store {
 	public courseState = new CourseState();
 	public updateState = new UpdateState();
 	public faqsState = new FAQState();
-
-	constructor() {
-		if (_.isNil(Store.INSTANCE)) {
-			Store.INSTANCE = this;
-		}
-
-		return Store.INSTANCE;
-	}
 }

src/ui/components/BaseComponent.ts

@@ -10,5 +10,5 @@ export abstract class BaseComponent<
 	S extends BaseComponentState = BaseComponentState
 > extends React.Component<P, S> {
 	public state = {} as S;
-	protected store = new Data.Store();
+	protected store = Data.Store.INSTANCE;
 }

src/ui/layout/DefaultLayout.tsx

+import * as _ from "lodash";
 import * as React from "react";
 import styled, { css } from "styled-components";
-import { NavBar } from "../components/navbar/NavBar";
 import { LayoutOptions } from "../navigation/Layout";
 import { WiderThan } from "../stylesheets/Mixins";
 import { Breakpoint } from "../stylesheets/Variables";
-import { LayoutBase, LayoutBaseProps } from "./LayoutBase";
+import { LayoutBase, LayoutBaseProps, LayoutBaseState } from "./LayoutBase";
 
-export interface DefaultLayoutOptions extends LayoutOptions {}
+export interface DefaultLayoutHeaderOptions {
+	render: () => React.ReactNode;
+}
+
+export interface DefaultLayoutNavOptions {
+	render: () => React.ReactNode;
+}
+
+export interface DefaultLayoutOptions extends LayoutOptions {
+	header: Partial<DefaultLayoutHeaderOptions>;
+	navOptions: Partial<DefaultLayoutNavOptions>;
+}
 
 export interface DefaultLayoutProps<
 	L extends DefaultLayoutOptions = DefaultLayoutOptions
 > extends LayoutBaseProps<L> {}
 
-export class DefaultLayout extends LayoutBase {
+export interface DefaultLayoutState extends LayoutBaseState {}
+
+export class DefaultLayout<
+	P extends DefaultLayoutProps = DefaultLayoutProps,
+	S extends DefaultLayoutState = DefaultLayoutState
+> extends LayoutBase<P, S> {
 	protected Container = styled.div`
 		height: 100%;
 		width: 100%;
@@ -44,17 +60,20 @@ export class DefaultLayout extends LayoutBase {
 	`;
 
 	public renderContent() {
-		const { children } = this.props;
+		const { children, options } = this.props;
 
 		const { Container, NavBarWrapper } = this;
 
 		return (
 			<Container>
+				{children}
+
 				<NavBarWrapper>
-					<NavBar />
+					{!_.isNil(options) &&
+						!_.isNil(options.navOptions) &&
+						!_.isNil(options.navOptions.render) &&
+						options.navOptions.render()}
 				</NavBarWrapper>
-
-				{children}
 			</Container>
 		);
 	}

src/ui/layout/LayoutBase.tsx

@@ -16,4 +16,4 @@ export interface LayoutBaseState extends LayoutState {}
 export abstract class LayoutBase<
 	P extends LayoutBaseProps = LayoutBaseProps,
 	S extends LayoutBaseState = LayoutBaseState
-> extends Layout {}
+> extends Layout<P, S> {}

src/ui/navigation/AppNavigator.tsx

@@ -21,7 +21,7 @@ export interface AppNavigatorState {
 	page: typeof Page;
 	routeComponentProps: RouteComponentProps<any>;
 
-	layoutOptions: LayoutOptions;
+	layoutOptions: Partial<LayoutOptions>;
 
 	routeProps: RouteProps[];
 }

src/ui/navigation/Layout.tsx

@@ -2,17 +2,11 @@ import * as React from "react";
 
 export interface HeaderOptions {}
 
-export interface NavOptions {
-	node: typeof React.Component;
-}
-
 export interface LayoutOptions {
-	navOptions: NavOptions;
 	layout: typeof Layout;
 }
 
-export interface LayoutProps<L extends LayoutOptions = LayoutOptions>
-	extends React.Props<Layout> {
+export interface LayoutProps<L extends LayoutOptions = LayoutOptions> {
 	options?: Partial<L>;
 }
 

src/ui/navigation/Page.tsx

@@ -14,7 +14,7 @@ export abstract class Page<
 	P extends PageProps = PageProps,
 	S extends PageState = PageState
 > extends React.Component<P, S> {
-	public static defaultLayoutOptions: LayoutOptions;
+	public static defaultLayoutOptions: Partial<LayoutOptions>;
 
 	private layoutOptions: LayoutOptions;
 

src/ui/pages/BasePage.tsx

@@ -2,7 +2,7 @@ import { Observer } from "mobx-react";
 import * as React from "react";
 import { Data } from "../../core/Index";
 import { NavBar } from "../components/navbar/NavBar";
-import { DefaultLayout } from "../layout/DefaultLayout";
+import { DefaultLayout, DefaultLayoutOptions } from "../layout/DefaultLayout";
 import { LayoutOptions } from "../navigation/Layout";
 import { Page, PageProps, PageState } from "../navigation/Page";
 
@@ -15,10 +15,10 @@ export abstract class BasePage<
 	P extends BasePageProps = BasePageProps,
 	S extends BasePageState = BasePageState
 > extends Page<P, S> {
-	public static defaultLayoutOptions: LayoutOptions = {
+	public static defaultLayoutOptions: Partial<DefaultLayoutOptions> = {
 		layout: DefaultLayout,
 		navOptions: {
-			node: NavBar
+			render: () => <NavBar />
 		}
 	};
 

src/ui/pages/course/Course.tsx

@@ -64,7 +64,7 @@ export class Course extends CourseBase {
 		${WiderThan(
 			Breakpoint.small,
 			css`
-				background-color: #fafafa;
+				background-color: white;
 			`
 		)};
 	`;

src/ui/pages/faqs/FAQs.tsx

 import * as _ from "lodash";
 import * as React from "react";
 import styled from "styled-components";
+import { NavBar } from "../../components/navbar/NavBar";
+import { DefaultLayout } from "../../layout/DefaultLayout";
+import { LayoutOptions } from "../../navigation/Layout";
 import { List } from "../../stylesheets/Mixins";
 import { FAQItem } from "./faqitem/FAQItem";
 import { FAQsBase } from "./FAQsBase";
@@ -20,10 +23,6 @@ export class FAQs extends FAQsBase {
 		padding: 0 2em;
 		max-width: 700px;
 		max-height: initial;
-
-		a {
-			color: #236aa7;
-		}
 	`;
 
 	public renderContent() {

src/ui/pages/faqs/faqitem/FAQItem.tsx

@@ -28,6 +28,10 @@ export class FAQItem extends FAQItemBase {
 	protected FAQItemContent = styled.div`
 		font-weight: lighter;
 		text-align: center;
+
+		> a {
+			color: #236aa7;
+		}
 	`;
 
 	public render() {

src/ui/pages/home/Home.tsx

 import * as React from "react";
 import styled from "styled-components";
+import { NavBar } from "../../components/navbar/NavBar";
+import { DefaultLayout } from "../../layout/DefaultLayout";
+import { LayoutOptions } from "../../navigation/Layout";
 import { Grid } from "../../stylesheets/Mixins";
 import { HomeBase } from "./HomeBase";