Posted on Aug 2, 2020

Day 3: Navbar to CSS Grids

Collapsing Menu Bar

My navbar is up, woot! At first my hamburger menu wasn't quite showing up until I realized that its bc of how we sized things on flex and width within the .menu-content-container🤦🏻‍♀️

CSS Grids & Data

Where the struggle begins: my lack of familiarity w/ React Router. My "Trending Posts" do not show up on Home in place of my 404.

page-rend.js

import React from "react"; import { useRouteMatch } from "react-router-dom"; const generatePage = (page) => { const component = () => require(`./pages/${page}`).default; try { return React.createElement(component()); } catch (err) { console.warn(err); return React.createElement(() => 404); } }; export default function PageRenderer() { const { params: { page }, } = useRouteMatch(); return generatePage(); }

home.js

import React from "react"; import { PostMasonry } from "../components/common"; import trending from "../assets/mocks/trending"; const trendingConfig = { 1: { gridArea: "1 / 2 / 3 / 3", }, }; export default function Home() { return ( <section className="container home"> <div className="row"> <h2>Trending Posts</h2>  <PostMasonry posts={trending} columns={3} />  </div>  </section>  ); }

app.js

import React from "react"; import Navigation from "./components/nav"; import "./assets/scss/base.scss"; import { BrowserRouter as Router, Switch, Route, Redirect, } from "react-router-dom"; import PageRenderer from "./page-rend"; function App() { const user = { firstName: "Thit", lastName: "Nguyen", }; return ( <Router> <div className="App"> <Navigation user={user} />  <Switch> <Route path="/:page" component={PageRenderer} />  <Route path="/" render={() => <Redirect to="/home" />} />  <Route component={() => 404} />  </Switch>  </div>  </Router>  ); } export default App;

Possible Resolutions/Pace Is the Trick

I've got a hunch that it has something to do with how the <Router> and <Switch> component categories are set up because, everything else seems to check out.

So for now, I'm going to dive into the documentation and search for sources to get a better understanding of how all of this processes before going any further.

So far, learning React these past few days has taught me: