Much work, little outcome :thumbs-up:

typescript/package.json

@@ -23,6 +23,7 @@
     "react-helmet": "^6.0.0",
     "react-redux": "^7.2.0",
     "react-router-dom": "5.1.2",
+    "react-use-scroll-position": "^2.0.0",
     "reactstrap": "^8.4.1",
     "redux-devtools-extension": "^2.13.8",
     "redux-saga": "^1.1.3",

typescript/src/components/organisms/Navvy.tsx

@@ -0,0 +1,175 @@
+import { useScrollYPosition } from 'react-use-scroll-position';
+import { Link, NavLink } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+import {
+	Collapse,
+	Container,
+	DropdownItem,
+	DropdownMenu,
+	DropdownToggle,
+	Nav,
+	Navbar,
+	NavbarBrand,
+	NavbarToggler,
+	NavItem,
+	UncontrolledDropdown,
+} from 'reactstrap';
+import React from 'react';
+
+type Mode = 'primary' | 'secondary';
+
+const Navvy: React.FunctionComponent = () => {
+	const scrollY = useScrollYPosition();
+	const mode = scrollY < 100 ? 'primary' : 'secondary';
+
+	return (
+		<StyledNavbar
+			fixed={'top'}
+			expand={'md'}
+			mode={mode}
+		>
+			<Container>
+				<NavbarHeader mode={mode}>
+					<Brand
+						as={NavLink}
+						to={'/'}
+						mode={mode}
+					>
+						{'Branch'}
+					</Brand>
+					<NavbarToggler />
+				</NavbarHeader>
+				<Collapse isOpen navbar>
+					<Nav
+						className={'ml-auto'}
+						navbar
+					>
+						<NavItem>
+							<NavLink
+								className={'nav-link'}
+								to={'/blog'}
+							>
+								{'Blog'}
+							</NavLink>
+						</NavItem>
+						<UncontrolledDropdown
+							nav
+							inNavbar
+						>
+							<DropdownToggle
+								nav
+								caret
+							>
+								{'Games'}
+							</DropdownToggle>
+							<DropdownMenu right>
+								<DropdownItem>
+									<Link to={'/games/halo-mcc'}>{'Halo 3'}</Link>
+								</DropdownItem>
+								<DropdownItem divider />
+								<DropdownItem>
+									<Link to={'/games/halo-infinite'}>{'Halo Infinite'}</Link>
+								</DropdownItem>
+							</DropdownMenu>
+						</UncontrolledDropdown>
+						<NavItem>
+							<NavLink
+								className={'nav-link'}
+								to={'/about'}
+							>
+								{'About'}
+							</NavLink>
+						</NavItem>
+					</Nav>
+				</Collapse>
+			</Container>
+		</StyledNavbar>
+	);
+}
+
+const StyledNavbar = styled(Navbar) <{ mode: Mode }>`
+	height: 80px;
+	padding-top: 20px;
+	padding-left: 80px;
+	padding-right: 80px;
+
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+
+	transition: 0.5s;
+
+	${props => {
+		if (props.mode === 'primary') {
+			return css`
+				.navbar-nav > li {
+					> a {
+						color: ${props => props.theme.textInverse};
+
+						&, &:hover {
+							/* color: ${props => props.theme.textInverse}; */
+							opacity: .7;
+						}
+						&:active, &:focus {
+							color: #eee;
+						}
+					}
+
+					&.open > a {
+						&, &:hover {
+							background-color: transparent;
+							color: white;
+							opacity: 0.7;
+						}
+						&:active, &:focus {
+							background-color: transparent;
+							color: #eee;;
+						}
+					}
+				}
+			`;
+		}
+
+		if (props.mode === 'secondary') {
+			return css`
+				padding-top: 10px;
+				height: 70px;
+
+				background: white;
+				border-bottom: 1px solid ${props => props.theme.brandPrimary};
+			`;
+		}
+	}}
+`;
+
+const NavbarHeader = styled.div<{ mode: Mode }>`
+	background-position: left center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	height: 35px;
+	padding-left: 45px;
+
+	${({ mode, theme }) => mode === 'primary' && css`
+		background-image: url(${theme.images.logo});
+	`}
+	${({ mode, theme }) => mode === 'secondary' && css`
+		background-image: url(${theme.images.logoInverse});
+	`}
+`;
+
+const Brand = styled(NavbarBrand)<{ mode: Mode }>`
+	color: white;
+	font-size: 1.25rem;
+	line-height: 35px;
+	font-weight: 300;
+
+	${({ mode, theme }) => mode === 'primary' && css`
+		
+	`}
+	${({ mode, theme }) => mode === 'secondary' && css`
+		color: ${theme.brandPrimary};
+		font-weight: 400;
+	`}
+`;
+
+export default Navvy;

typescript/src/containers/AppContainer.tsx

@@ -1,11 +1,18 @@
+import { Container } from 'reactstrap';
+import Navvy from '../components/organisms/Navvy';
 import React from 'react';
+import styled from 'styled-components';
 
 const AppContainer: React.FunctionComponent = ({ children }) => {
 	return (
 		<React.Fragment>
-			<header></header>
-			<main>{children}</main>
-			<header></header>
+			<Navvy />
+			<main>
+				<Container>
+					{children}
+				</Container>
+			</main>
+			<footer></footer>
 		</React.Fragment>
 	);
 };

typescript/src/containers/Home.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
+import styled from 'styled-components';
 
 const Home: React.FunctionComponent = () => {
-	return <p>{'welcome 2 branch xx'}</p>;
+	return <Wrapper>{'welcome 2 branch xx'}</Wrapper>;
 };
 
+const Wrapper = styled.div`
+	height: 1200px;
+`;
+
 export default Home;

typescript/src/routes.tsx

@@ -2,11 +2,23 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import React from 'react';
 import Home from './containers/Home';
 import AppContainer from './containers/AppContainer';
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+	body {
+		background-color: ${props => props.theme.brandPrimary};
+	}
+
+	* {
+		font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+`;
 
 const Routes: React.FunctionComponent = () => {
 	return (
 		<React.Fragment>
 			<BrowserRouter>
+				<GlobalStyle />
 				<AppContainer>
 					<Switch>
 						<Route path={'/'} component={Home} />

typescript/src/theme/index.ts

@@ -1,5 +1,59 @@
-const theme = {
+import logo from '../../assets/images/logo/logo-150x150-w.png';
+import logoInverse from '../../assets/images/logo/logo-150x150.png';
 
+interface Theme {
+	brandPrimary: string;
+	brandSecondary: string;
+	brandTertiary: string;
+	brandQuaternary: string;
+
+	brandAccentPrimary: string;
+	brandAccentSecondary: string;
+	brandAccentTertiary: string;
+
+	anchorPrimary: string;
+	anchorPrimaryActive: string;
+	anchorSecondary: string;
+	anchorSecondaryActive: string;
+
+	separatorLight: string;
+
+	textInverse: string;
+
+	images: {
+		logo: string;
+		logoInverse: string;
+	};
+}
+
+const defaultTheme: Theme = {
+	brandPrimary: '#3d3d7c',
+	brandSecondary: '#353575',
+	brandTertiary: '#5d5da0',
+	brandQuaternary: '#aaa4b6',
+
+	brandAccentPrimary: '#e25092',
+	brandAccentSecondary: '#b42c69',
+	brandAccentTertiary: '#d3508b',
+
+	anchorPrimary: '#3d3d7c',
+	anchorPrimaryActive: '#3d3d7c',
+	anchorSecondary: '#e25092',
+	anchorSecondaryActive: '#d3508b',
+
+	separatorLight: '#eee',
+
+	textInverse: 'white',
+
+	images: {
+		logo,
+		logoInverse,
+	},
 };
 
-export default theme;
+// yolo this
+declare module "styled-components" {
+	interface DefaultTheme extends Theme {}
+}
+
+export default defaultTheme;

typescript/yarn.lock

@@ -1506,6 +1506,11 @@ react-transition-group@^2.3.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-use-scroll-position@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-use-scroll-position/-/react-use-scroll-position-2.0.0.tgz#c5bb29f751d126ff1c0306c28d7055ce0d4ef034"
+  integrity sha512-nQaWMPElzI8aN1vYTnqy0xV17pEhItgyWUBOtdmMEqsbY1mV3+iZMyTeAJ+oegsQIugYxBU4LnV2NosynN+KKA==
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"