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:

1. Patience
2. Punctuation
3. Literalness
4. Humility

Image Credit 一 bluumind