Enter the project and start it up.
Initial Building Blocks
Let’s take a mobile-first design approach and set up the basic structure of our app that’s optimized for small screen sizes.
Open up your
App.js and paste the following code into it.
Some things to note from the above snippet
- We created a
stylesobject that will contain the main styling properties for our app.
- In this tutorial, we’ll just pass the
- We have an array of
menuItemsthat will be displayed in the
FooterMenu. Why keep them in
App.js? Because we’ll use the same array in the sidebar at larger screen sizes!
- I just recently started using functions (e.g.
Let’s create components for the small screen layout
Create a new folder in the
src directory called
components and add the three main layout components in there.
- Note how we’re using the globally available
styles.topBarHeightfor (you guessed it) the height of the
Topbar. Seems trivial here, but it’ll help to use the same property in the
- Here we’re just rendering the
menuItemsto be evenly spaced and centered in the fixed footer. Note that it’s just icons for now — we’ll add words at a bigger screen width shortly.
- We’re creating 20 dummy blog posts to act as the content.
- Because the
FooterMenuhave fixed positions, they overlap the
Content. So, taking advantage of our globally available
styles, we can set top and bottom padding of the
Contentbased on the
footerMenuHeight. And If you ever want to change those values, the
Contentwill update accordingly and not have any styling issues.
- Refresh if you see errors, hot loading might not notice new files.
Here’s how it should look on a mobile sized screen
But when it gets bigger….
Yeah, not ideal. So, when the screen is wide enough (at 500px, for example), let’s show the text of the menu items in the
<FooterMenu/>. But how do we know when the screen is 500px wide, without using media queries?
Tracking the window size and using it
Here’s some updated code to paste into
- All we’re doing here is keeping track of the browser
window’s width and height in the
- We don’t even need the height for this tutorial, but one can imagine use-cases for tracking it.
App.js, add a bool property to the
styles object indicating whether the window is wide enough to show text in the
<FooterMenu/> menu items.
FooterMenu.js to show the menu text when applicable (and add some margin to the icons, too).
Adding a sidebar for bigger screens
Our sidebar is going to have two versions
- A “collapsed” version that’s pretty thin and just has icons, which looks better on screen sizes too wide for a
FooterMenubut not quite wide enough for a full blown sidebar with text.
- An expanded version that includes menu text and is for larger screen sizes.
So, let’s update the
styles and tweak the
render function in
App.js to accommodate and control the new
Sidebar component. Here’s the final
Here are the notable changes in
styles.showSidebar— show the
Sidebarwhen the window width is greater than 768px. We’ll also hide the
styles.sidebarCollapsed— we’ll display the narrower, collapsed version of the sidebar at window widths less than 1100px.
styles.sideBarWidth— change the
Sidebar‘s width based on whether it’s collapsed or not.
Create a new component file called
Sidebar.js, and paste the below code into it. Note all of the styling ternaries for handling the different styles at different screen sizes.
One last thing…
Sidebar is overlapping the main
Content, so we have to make some final tweaks to
Content.js to offset the content by however wide the
Sidebar currently is, plus a little extra padding.
And that’s it!
Play around with your browser window and see how responsive the app is.