feat: create dropdown for docs sidebar #2328
Conversation
akshatnema
requested review from
derberg,
magicmatatjahu,
Mayaleeeee and
asyncapi-bot-eve
as code owners
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-2328--asyncapi-website.netlify.app/ |
|
|
||
| const onClickHandler = () => { | ||
| setOpenSubCategory(!openSubCategory); | ||
| onClick(); |
There was a problem hiding this comment.
Why are adding this here??
There was a problem hiding this comment.
Because we need to call the functions inherited by the parent component, when clicked. So, it's actually used in the mobile view. Whenever an option is clicked, the navMenu in mobile view gets closed.
|
|
components/icons/DocsArrow.js
Outdated
| @@ -0,0 +1,7 @@ | |||
| export default function DocsArrow({ isDropDown, activeDropDown, onClick, className }) { | |||
There was a problem hiding this comment.
for better understanding of a newcommer we should have activeDropDownItem instead of activeDropDown
components/icons/DocsArrow.js
Outdated
| export default function DocsArrow({ isDropDown, activeDropDown, onClick, className }) { | ||
| return ( | ||
| <div className={`w-6 my-auto p-2 rounded-md cursor-pointer ${isDropDown && 'hover:bg-gray-100'}`} onClick={isDropDown ? onClick : () => { }}> | ||
| {isDropDown && <img src='/img/illustrations/icons/arrow.svg' className={`transition-transform w-fit m-auto duration-200 transform ${className} ${activeDropDown ? 'rotate-90 translate-x-0.5' : ''}`} />} |
There was a problem hiding this comment.
Can you please explain what ${className} in line 4 is helping us with as I tried without having it and it was working correctly.
There was a problem hiding this comment.
Yes, but what if we need to reuse this component with some different attributes? In that case, this className will help to extend the properties of the component.
There was a problem hiding this comment.
Yes, in that case it is fine
components/navigation/DocsNav.js
Outdated
|
|
||
| import { buckets } from '../data/buckets'; | ||
| import { useEffect } from 'react'; |
There was a problem hiding this comment.
I think we should have this in the 2nd line so that we have everything listed in a systematic way 😅
|
|
||
| const onClickHandler = () => { | ||
| setOpenSubCategory(!openSubCategory); | ||
| onClick(); |
| import DocsNavItem from "./DocsNavItem"; | ||
| import DocsArrow from "../icons/DocsArrow"; | ||
|
|
||
| export default function SubCategoryDocsNav({ subCategory, active, onClick }) { |
There was a problem hiding this comment.
we can also cange this active to something self explanatory such as activeItem
|
@Mayaleeeee as this PR has some design changes so I suggest you should have also have a look regarding the design perspective |
|
is it ready for final review? |
@sambhavgupta0705 The comment has been resolved in the latest commit. |
|
@derberg you can now review this PR |
There was a problem hiding this comment.
works beautifully! OMG it is so much better to navigate
I only see some header issue on mobile:
to replicate go to https://deploy-preview-2328--asyncapi-website.netlify.app/docs/concepts/server#what-is-a-server on mobile and click concepts link, the one you see below
This particular issue is not part of this PR. This issue has been handled in separate PR. |
There was a problem hiding this comment.
@akshatnema perfect, thank I'm ok to merge this one. Fantastic job !!!
|
/rtm |
|
@asyncapi/bounty_team |
Description
Created a Dropdown for the Docs Sidebar, for all the subcategories of Docs in the sidebar.
Related issue(s)
Resolves #1299