I have been trying to build a website using Next JS and Chakra UI and I wanted to make it responsive. So I have used the react-responsive package to do so. My initial goal is to make a responsive navbar. The working is as follows:
In desktop mode, this is the output I am expecting:
The toggling happens perfectly from light mode to dark mode. For the mobile mode, I would want to have a hamburger instead of the navbar, which on being clicked has a Drawer Chakra UI element to show all navbar contents.
While all of this has been implemented as expected, a small bug seems to have occurred. I am getting the hamburger icon instead of the Moon Icon every time I refresh the page in desktop mode.
Here is a quick demo of the issue I have been facing
I have attached the corresponding code for this part
Importing packages and assigning variables, We are concerned about isBigScreen
import { SunIcon, MoonIcon, HamburgerIcon } from '#chakra-ui/icons';
import { useMediaQuery } from 'react-responsive';
const { colorMode, toggleColorMode } = useColorMode();
const bg = useColorModeValue(navBgColor.light, navBgColor.dark);
const isBigScreen = useMediaQuery({ minWidth: 600 });
const { isOpen, onOpen, onClose } = useDisclosure();
Then I am returning a NavContainer which essentially is a Flex with some configs.
return (
<NavContainer
flexDirection="row"
justifyContent="space-between"
alignItems="center"
maxWidth="900px"
width="100%"
bg={bg}
as="nav"
p={8}
mt={[0, 8]}
mb={8}
mx="auto"
>
.
.
.
// Code inside this is mentioned below
.
.
</NavContainer>
);
This part of the code sets up the color toggler on the left. This has been taken from the example code in react-responsive readme
{isBigScreen && (
<IconButton
aria-label="toggle dark mode"
icon={colorMode == 'dark' ? <SunIcon /> : <MoonIcon />}
onClick={toggleColorMode}
/>
)}
This is the part of the code which I feel is causing an issue
This part of the code makes sure that if the screen is desktop then show navbar with the Links (home, about, projects, blog) in the same row as shown in image 1 and 2, and if this is not in desktop mode, then show a hamburger icon.
{isBigScreen ? (
<Box>{LINKS.map(getLink)}</Box>
) : (
<IconButton
aria-label="toggle ham"
icon={<HamburgerIcon />}
onClick={onOpen}
/>
)}
This part of the code takes care of the situation when it is in mobile mode where a drawer is sliding from left. This is also working perfectly.
<Drawer isOpen={isOpen} placement="left" onClose={onClose}>
<DrawerOverlay>
<DrawerContent>
<DrawerCloseButton />
<DrawerBody>
<Flex
direction="column"
justifyContent="center"
height="100%"
alignItems="center"
>
<IconButton
boxSize="50px"
mb="6"
aria-label="toggle dark mode"
icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
onClick={toggleColorMode}
/>
{LINKS.map(getLink)}
</Flex>
</DrawerBody>
</DrawerContent>
</DrawerOverlay>
</Drawer>
If any further clarification is required, I would be glad to help. Thanks in advance.
Should be as simple as:
import { colorMode, useColorMode } from "#chakra-ui/react";
import { MoonIcon, SunIcon } from '#chakra-ui/icons';
const { colorMode, toggleColorMode } = useColorMode();
<Button onClick={toggleColorMode}>
{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
</Button>
So, I can't say without seeing your full-code, but I would forget the react-responsive library and just set your breakpoints and your display property on your menu with this display={['none', 'none', 'flex', 'flex']} and the reverse for your hamburger.
I am creating a chat app and I wanted to have a custom header. I am using React Navigation that is working fine and the header is functioning properly but not styling properly. I am using React Native Paper for custom header. My code is ( just copied from website to make sure that everyone thing works fine which obviously not ):
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
It is supposed to work like this:
But on my Android Device it look like this:
Add some padding to the Appbar.Header like this:
<Appbar.Header style={{padding:40}}>
<Appbar.BackAction />
<Appbar.Content title="Title" subtitle="Subtitle" />
<Appbar.Action icon="magnify" />
<Appbar.Action icon="dots-vertical" />
</Appbar.Header>
Working Example on Snack
I am developing a web application using React and Semantic UI React as a front-end framework. The application is tested and works in Chrome, Microsoft Edge, Safari and Mozilla Firefox. However in this last browser I noticed a problem with iframes. The image below shows a modal window with iframe with a pdf. The window opens correctly but as soon as I try to click inside it or scroll the pdf downwards, the modal window is displayed incorrectly.
I tried to identify any problems in the rendered HTML code using the Firefox developer tools (F12) but I didn't notice anything.
I am using Firefox v77.0.1 64bit (latest version) and the modal window is implemented as follows:
<Modal closeIcon open={this.state.open} onClose={this.onClose}>
<Modal.Content>
<Steps ... />
<div style={{ width: "100%", height: "500px" }}>
<Iframe url={...} width={"100%"} height={"460px"} />
<Checkbox ... />
</div>
</Modal.Content>
<Modal.Actions>
<Button color='red' onClick={this.props.onRefuse}>
<Icon name='remove' />
Refuse
</Button>
<Button color='green' onClick={this.props.onAccept}>
<Icon name='check' />
Accept
</Button>
</Modal.Actions>
</Modal>
I'm creatting web app with React Leaflet. How I can transfer marker popup to react-leaflet-sideatabs
Local machine with react (windows 10)
<Sidebar
id="sidebar"
position="right"
collapsed={this.state.collapsed}
closeIcon={<FontAwesomeIcon icon={faAngleRight} />}
selected={this.state.selected}
onOpen={this.onOpen.bind(this)}
onClose={this.onClose.bind(this)}
>
<Tab
id="markerinfo"
header="Information"
icon={<FontAwesomeIcon icon={faInfoCircle} />}
>
// I need to transfer marker information here
</Tab>
</Sidebar>
Not sure if I understand the question. But I think the answer is simply React state. Say you have a marker and only the title is kept in state, you can take it anywhere for that matter.
See this sandbox example.
https://codesandbox.io/s/react-sidebar-marker-wknsp
Note: the example from that sidebar GitHub page was not working with my styling/etc on code sandbox.io so slightly adapted.
I use react native to make app in android. and I use react-native-scrollable-tab-view, when I use two tabbar in the view .one is on top, the other is in bottom.But when I click one only display half screen. I want got the full screen. Thank you for your help!!
currently:enter image description here
I want to get:enter image description here
bellow is my code:
render(){
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
>
<View1 style={styles.navText} tabLabel="菜单1" />
<View2 tabLabel="菜单2" />
<View3 tabLabel="菜单3" />
</ScrollableTabView>
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
tabBarPosition='bottom'
>
<View5 tabLabel="菜单5" />
<View6 tabLabel="菜单6" />
</ScrollableTabView>
</View>
)
}