Bug: Toggle Docs Menu Icon not visible in dark mode and by default template responsive device options not visible even if current tab is preview

[rameshmane7218]

1. Toggle Docs Menu Icon not visible in dark mode :-
   
   

   • IconButton has bg='white' and based on currentColor icons color will change.
   • So, on dark theme currentColor is white and IconButton bg also white

2. By default template responsive device options not visible
   

   It is visible only after switching tab from Code to again Preview
   

 <ExampleViewerRadio isOpen={tabIndex === 0 && IsNotSmartPhoneWidth}>
    <HStack>
      {options.map((value) => {
        const label = value.width
        const radio = getRadioProps({ value: label })
        return (
          <RadioCard key={value.label} {...radio}>
            {value.icon}
          </RadioCard>
        )
      })}
    </HStack>
  </ExampleViewerRadio>

• As per above code options are visible if (tabIndex === 0 && IsNotSmartPhoneWidth) == true
• Everything in code is correct but the issue is with animation

const variants = {
  open: {
    opacity: 1,
    y: 0,
    display: 'block',
  },
  closed: {
    opacity: 0,
    y: 20,
    transitionEnd: {
      display: 'none',
    },
  },
}

const ExampleViewerRadio: React.VFC<Props> = (props) => {
  return (
    <MotionBox
      as="aside"
      initial={{ scale: 1 }}
      transition={{ duration: 0.15, type: 'tween' }}
      animate={props.isOpen ? 'open' : 'closed'}
      variants={variants}>
      {props.children}
    </MotionBox>
  )
}

• Initialy (const IsNotSmartPhoneWidth = useBreakpointValue([false, true])) IsNotSmartPhoneWidth value is false and after some time its true due to that isOpen props of ExampleViewerRadio is changing before completing first closed animation
• Here initially (before user interaction) the animation start and complete sequence is
  • Start closed animation
  • Start open animation (this will set display: 'block')
  • TransitionEnd closed animation (this will set display: 'none')
• To fix this we need to add transitionEnd: {display: 'block'} in open animation variants
• I also tried different approch like manually controlling animation using useAnimate() which allow us control animation manually set, start and stop but this is also not working

[rameshmane7218]

Please assign this issue to me as I already fixed this locally and also adding 1 new curved carousel