DEV Community

Cover image for Day 3: Navbar to CSS Grids

Day 3: Navbar to CSS Grids

obscenely delicious taste in music and pizza toppings. loves a good game of MtG.
・2 min read

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πŸ€¦πŸ»β€β™€οΈ

Alt Text

Alt Text

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.


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) {
    return React.createElement(() => 404);

export default function PageRenderer() {
  const {
    params: { page },
  } = useRouteMatch();

  return generatePage();


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} />


import React from "react";
import Navigation from "./components/nav";
import "./assets/scss/base.scss";

import {
  BrowserRouter as Router,
} from "react-router-dom";
import PageRenderer from "./page-rend";

function App() {
  const user = {
    firstName: "Thit",
    lastName: "Nguyen",

  return (
      <div className="App">
        <Navigation user={user} />
          <Route path="/:page" component={PageRenderer} />
          <Route path="/" render={() => <Redirect to="/home" />} />
          <Route component={() => 404} />

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

Discussion (0)