We Keep Coding

div height doesn't adjust when Accordion is collapsed

I have two charts on top of each other that extend to the bottom of the screen. The first is collapsible via an Accordion.
However, if I do the following two things in sequence:
Make my browser window bigger
Then, collapse the Accordion (i.e., minimize the first graph).
Then there will be unwanted whitespace below the second graph.
<Flex direction="column" height="calc(100vh)" className="flex-wrapper">
<Box fontSize={["sm", "md", "lg", "xl"]}>Font Size</Box>
<Flex className="flex-wrapper0">
<div>123456789010</div>
<Box className="accordion-box-container">
<Accordion className="accordion-wrapper" allowToggle>
<AccordionItem>
<h2 className="accordion-title">
<AccordionButton
className="accordion-button"
borderRadius="md"
borderWidth="0px"
_focus={{ boxShadow: "none" }}
>
<Box
textAlign="left"
h={3}
_focus={{ boxShadow: "none" }}
></Box>
<AccordionIcon />
</AccordionButton>
</h2>
<AccordionPanel p="0">
<Box height="30vh">
<ThreeDataPoint />
</Box>
</AccordionPanel>
</AccordionItem>
</Accordion>
<div className="graph-wrapper">
<ThreeDataPoint />
</div>
</Box>
</Flex>
</Flex>
It seems like some interaction problem between browser resizing and css? I think I need to force a re-rendering of <ThreeDataPoint /> whenever the accordion button is pressed so that it can pick up the new height that it's supposed to be using. I wonder how to force such a re-rendering?
Here's codesandbox:
https://codesandbox.io/s/elegant-fermat-bugv1?file=/src/index.tsx
And the app URL:
https://bugv1.csb.app/

It was because of this !important flag causing troubles in the css file:
.graph-wrapper div {
height: 100% !important;
}
After commenting this out, it worked as expected.

Rotate/Transform Material-UI List

I'm trying to use React Material-UI and the Drawer API to build a navigation sidebar with the buttons rotated (a stacked list with the buttons turned 90 degrees). I only have a few buttons I'd like to use so I'm trying to do this with the permanent Drawer setup. I was wondering if anyone had any examples or solutions to this. Presently I have this in a CSS file:
.horiz-list {
display: inline-block;
transform: rotate(270deg);
height: 80px;
width: 50px;
}
and this as an example in my sidebar code:
const button = {
text: "Photos",
onClick: () => history.push('/photos')
};
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
<Toolbar />
<div className={classes.drawerContainer}>
<Divider />
<List>
<ListItem button key={button.text} onClick={button.onClick}>
<ListItemText primary={button.text} className="horiz-list" />
</ListItem>
</List>
<Divider />
</div>
</Drawer>
Right now, some of the labels end up off screen and with the slider at the bottom. Thanks in advance!

How to add a button inside a react navigation drawer

I need to add a logout button in a drawer with the React Navigation drawer tried doing this:
<Drawer.Navigator>
<Drawer.Screen name="Sales" children={CreateHomeStack} />
<Drawer.Screen name="Items" component={ItemsScreen} />
<Drawer.Screen name="Categories" component={CategoriesScreen} />
<Button>
<Text>LOGOUT</Text>
</Button>
</Drawer.Navigator>
But I get an error saying
A navigator can only contain screen components...
so how can I add buttons to a Drawer Navigator?

With respect to 5.x documentation you need to define custom component and override/pass it with drawerContent props where you can push your screen routes plus your custom route items.
Here is code how to add custom ReactElement/Component:
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
</DrawerContentScrollView>
)
}}>
<Drawer.Screen name="Home" component={Home}/>
<Drawer.Screen name="New Project" component={NewProject} />
</Drawer.Navigator>
Here you are overriding default drawer container with you component code
This(<DrawerItemList {...props} />) line of code render you screen's
And rest is your area where custom code for drawer container will added.

Show antd horizontal menu onClick

In this first example of horizontal menu, I want to change "Navigation Three - Submenu" to open onClick instead onHover and want to add toggle icon (up and down arrow) next to it as well.

In this case, you need to implement your own menu using Tabs component.
Here is the idea of how it's done, you need to add animations on revealing the menu and switching the up/down arrows.
<Tabs onTabClick={() => setShowMenu(prev => !prev)}>
<Tabs.TabPane
tab={
<>
<Icon type="setting" />
Navigation Three - Submenu
<Icon type={showMenu ? "up" : "down"} style={{ marginLeft: "10px" }} />
</>
}
/>
</Tabs>;
{
showMenu && (
<Menu>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</Menu>
);
}
Demo:

How to use text instead of Icon for react-toolbox menu?

I am using react-toolbox menu for my website. Based on the example given in the documentation React-toolbox menu, I can only use icon as my menu. How can I use text for the menu instead?
Example of what I want to do:
When I click the blog text which is a menu, the menuItem will be shown.
Is it possible to do this?

just remove icon property from MenuItem component
<IconMenu icon={<div>blog</div>} position='topLeft' menuRipple>
<MenuItem value='download' caption='Download' />
<MenuItem value='help' caption='Favorite' />
<MenuItem value='settings' caption='Open in app' />
<MenuDivider />
<MenuItem value='signout' icon='delete' caption='Delete' disabled />
</IconMenu>

You can pass an element to the icon property like that:
<IconMenu icon={<div>Menu</div>} position='topLeft' menuRipple>

In case someone else has the problem, the solution is to use Menu component instead of IconMenu. Like this :
const [menuActive, setMenuActive] = useState(false);
return (
<div style={{ position: 'relative' }}>
<Button label='Actions' onClick={() => setMenuActive(!menuActive)} />
<Menu position='topRight' active={menuActive} onHide={() => setMenuActive(false)}>
<MenuItem value='download' caption='Download' />
<MenuItem value='action' caption='Action' />
</Menu>
</div>
);