feat: update header and navigation #369
Conversation
|
Preview is ready. |
yuberdysheva
force-pushed
the
update-header-and-navigation
branch
from
8c43b12 to
d6bf7bf
Compare
| } | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', _.debounce(handleScroll, 5), {passive: true}); |
There was a problem hiding this comment.
if I set 100 there is big delay on scroll before border shows up. I set 20
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { |
There was a problem hiding this comment.
seems like we should add this handler only if !withBorder is true
| const {leftItems, rightItems, iconSize = 20, withBorder = false} = data; | ||
| const [isSidebarOpened, setIsSidebarOpened] = useState(false); | ||
| const [activeItemId, setactiveItemId] = useState<string | undefined>(undefined); | ||
| const [withHeaderBorder, setWithHeaderBorder] = useState(withBorder); |
There was a problem hiding this comment.
what is the difference between withBorder and withHeaderBorder?
There was a problem hiding this comment.
- We pass the prop
withBorderwhich can show or hide border whenscrollY = 0. - We always have to show border when
scrollY > 0. - I chose not to rewrite the original prop to hide/show border but create a new one
withHeaderBorderand change this state if it's necessary. I rename variablewithHeaderBordertoshowBorderis that better?
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| if (window.scrollY > 0 && !withBorder) { | ||
| setWithHeaderBorder(true); |
There was a problem hiding this comment.
why do we set withHeaderBorder when withBorder is false?
There was a problem hiding this comment.
Because withBorder = false needs only for scrollY = 0. If we have scrollY > 0 we have to show border all the time
There was a problem hiding this comment.
If we have scrollY > 0 we have to show border all the time
then should this condition be like if(window.scrollY > 0)?
There was a problem hiding this comment.
It's not necessary. If withBorder = true we don't have to change anything.
const [showBorder, setShowBorder] = useState(withBorder);
showBorder is constantly true
There was a problem hiding this comment.
I think we can check showBorder instead of withBorder if you think so
Add new stories for navigation:
https://preview.gravity-ui.com/page-constructor/369/?path=/story/navigation-navigation--default-navigation