The Menu and Header
This lesson is going to focus on getting the menu and header completed on our mock Settings Page
This lesson is going to focus on getting the menu and header completed on our mock Settings Page.
We will be doing everything in codesandbox.io, using their React Starter Template. To ensure you are all using the identical dependency versions, I would recommend going to this sandbox that I have already made and forking it by clicking on the "Fork" button in the upper right-hand corner:
This will create your own copy so you can follow along.
Setting up the
Let's get a few things in place so we can get started. The first thing we need to do is install
styled-components and the
@bedrock-layout/css-reset. That can be done on the left-hand side, under
Just search for the package you want, like
styled-components and select it. Codesandbox will then install it for you. This is equivalent to running
npm install styled-components on your local machine.
Then in the
index.js file, I am going to import the css-reset:
While we are in this file, let's look at AppBoundary, which is something I like to add to all my projects. High-resolution screens are becoming more commonplace, and websites are much easier to use when the content width is capped at a useable width. Bedrock already has a component called
AppBoundary that limits the width at
1920px and keeps the content centered horizontally on the screen.
So let's install
@bedrock-layout/appboundary and import it into our
Then all we need to do is wrap our
App component in
index.js in the
The menu's basic layout#
App.js, let's start off by removing the imported styled sheet at the top and the className on the wrapper div. (Don't delete the stylesheet from the project as we will use that later.) Now our entire file looks like this:
Before we think about layout, let's just stub out what is going to be in our MenuBar. We need a logo, a navigation area, a search input, an icon, and a profile image. Let's remove the sandbox content and add our menu content:
What we need to do in this MenuBar is inline everything, with the nav section stretching out to use all available space. So let's bring in the Inline component by installing
@bedrock-layout/inline and importing it into the file. Just like above you install it by searching for it in the dependency list on the left.
Then we can use that as the wrapper of our MenuBar like this:
At this point, our MenuBar looks like this:
Our navigation list also needs to be inlined, so let's use the Inline component as a