Nextjs layout tutorial: Build a shared layout with nav bar, styled with css modules
Build a shared layout with nav bar, styled with css modules. Learn to customise _app.js, page linking and css modules.
UPDATE: I missed a function to close the menu when you click on mobile menu link. Please see new code on git hub, I have added it there!
You would need the link for CODEPEN for Navbar code : https://codepen.io/ui-code-tv/pen/zYo...
Code on Github : https://github.com/ui-code-tv/myapp
Other Next.js tutorials:
NextJs data fetching tutorial getStaticProps and MYSQL:
• NextJs data fetching tutorial #part2 using...
NextJs data fetching tutorial using SWR and getStaticProps:
• NextJs data fetching tutorial using SWR an...
Other tutorial videos on React.js framework:
Recharts tutorial - Build line chart:
• Recharts Tutorial: Create a great looking ...
Reacharts custom SVG axis:
• Recharts Tutorial: Create a bar chart with...
React.js Styled-components:
• Styled components Tutorial Part1: Tips and...
React.js Query tutorial:
• React Query Tutorial - Refactor your old d...
React.js animation tutorial using spring animation:
• Create animated login register form in rea...
Intro : (00:0:00)
Customize _app.js and create layout component: (00:09:25)
Create global and layout styles: (00:13:02)
Navbar markup and styling: (00:15:43)
Navbar toggle and animation code logic: (00:25:09)
Add about and contact page : (00:37:40)