How to build a sidebar with React JS // Styled-Components, Routing, Theming, and Context API
In this video, we will be building an amazing looking sidebar with routing, theme toggle, size toggle, and search bar. To build this component, we'll use React JS as our JavaScript framework, and styled-components as our css styling tool. In addition to this, we'll use context api, react-rputer-dom, react icons, react helmet, and more!
Use this video as a means to improve your React and css skills, or use it simply to build this great looking component! If this video helps you, please consider liking the video and subscribing to the channel! Thank you.
Assets:
GitHub Repo: https://github.com/CodeFocusChannel/r...
Google Fonts: https://fonts.google.com/specimen/Roboto
Logo Image (assets): https://github.com/CodeFocusChannel/r...
Timestamps:
0:00 Demo
0:30 Initial Setup
3:35 Theme Setup w/ Context
4:44 Styled Components Setup
12:00 Layout Component
14:33 Routing Setup
17:30 Sidebar JSX + CSS
18:08 Logo
21:12 Search
26:25 Links
36:08 Theme Toggler
42:16 Sidebar Toggler
45:50 Sidebar State Handling
50:28 Active Link
51:46 Search Click Handler
53:00 Outro
Thank you for watching! Like, comment, and subscribe for more content!