I'm trying to create a left sidebar only for desktop (min width 1200px), in other case (tablet, mobile), needs to hide the sidebar. I'm using Sidebar Pushable from Semantic UI React.
I tried this demo to this but doesn't works:
<Sidebar.Pushable as={Segment}>
<Sidebar
as={Menu}
animation='push'
icon='labeled'
inverted
vertical
visible={window.innerWidth >= 1200 ? true : false}
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item as='a'>
<Sidebar.Pusher>
<Segment basic>
//CONTENT
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
Someone else had the same problem? Many Thanks!
Armando
the issue is not with render load times. The issue is that react does not re-render a component unless the state of that component changes. Since you had tied the visible prop with window.innerWidth directly, for that component the state was not changing and hence was not re-rendering. Checkthis link with working code sandbox
https://codesandbox.io/s/semantic-ui-example-xqhjl?file=/example.js
Related
I have a sidebar component in my admin panel which has multiple links. Some of these links are in the dropdown menu. Now I want to add an active class based on an active link or if the active link is in the dropdown menu then to the dropdown toggle. Below is my code for a sidebar. Btw I am using antd framework for ui.
<Sider
width={260}
className={styles.sider}
collapsible
trigger={null}
collapsed={drawer}
breakpoint={"md"}
collapsedWidth={0}
>
<Menu mode="inline">
<Menu.Item
icon={<IoGrid />}
key="1"
onClick={(e) => {
toggleKey(e);
gotoPage("/");
}}
className={selectedKey == 1 ? styles.active_item : ""}
>
Dashboard
</Menu.Item>
<SubMenu
title="Settings"
key="2"
icon={<IoSettingsOutline />}
className={selectedKey == 2 ? styles.active_item : ""}
>
<Menu.Item
icon={<IoPersonAddOutline />}
key="2.1"
onClick={(e) => {
toggleKey(e);
gotoPage("/settings/profile");
}}
>
Profile
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
Btw the selectedKey and toggleKey function comes from top level component and gotoPage is just router.push functionality.
Thanks.
As per this answer you should use useRouter hook to get current path.
For your use case instead of equality check you should probably use startsWith or maybe some other check. So it would look like this
Let's say you have
Settings -> /settings
Profile -> /settings/profile
Notifications /settings/notifications
You check if current path starts /settings and you assume that Settings group is active and you simply expand Settings submenu and add active class to Settings group.
If you are currently on /settings/notification this would mean that you can identify following:
active group
active dropdown
active sublink
I think it is better to have custom LinkGroup component that would check for its 'activeness' and would add specific styling and show/hide its submenu.
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'm using the latest versions of react and semantic-ui-react
I have this Iconelement set up from semantic implementing navigation to an external link (github)
<Menu.Item
position="right"
to="https://github.com"
as={Link}
>
<Icon name="github" size="big" />
</Menu.Item>
When I click the icon in my UI, it's trying to append the github url to the url of my UI. So I'm at localhost:blah/someUrl it's requesting localhost:blah/someUrl/https://github.com
Is this an issue with routing or misuse of the <Icon> props?
It's rather a misuse of router link: If you want to link to external pages, don't use routers <Link> component.
It will work the following way:
<Menu.Item
href="https://github.com"
position="right"
target="_blank"
>
<Icon name="github" size="big" />
</Menu.Item>
I have an issue related with styling in React / Material UI. I think is an issue related with TouchRipple from Material-UI
<div key={indexP}>
<Link className={classes.link} to={parent.link}>
<ListItem button selected={this.state.treeParentOpen[indexP] === true} onClick={this.handleClick(indexP)}>
<ListItemIcon>
<ParentIcon />
</ListItemIcon>
<ListItemText primary={parent.title} />
</ListItem>
</Link>
<Divider />
</div>
I have the above code inside a Drawer component (this is a small extract just to exemplify), for a Sidebar menu.
The issue i am having is related with the styling interaction of the ListItem and Link Components.
If i take the Link out of the code i have a normal ListItemripple behaviour (onclick and offclick), everything is pretty and in grey shades.
When i had the Link to the code (as is), the ripple behaviour of the ListItem changes and onClick is Blue and offClick purple. How should i address the styling of the ripple effect associated with buttonBase used in ListItem.
Thanks!
I've stacked with some strange issue. When I create a menu block with a button inside of it, I'm expecting to get a "Regular" button, but getting, kind of, Menu Item View.
Instead of
<Menu inverted>
<Menu.Menu>
<Menu.Item header>
<Image className="logo" src={logoImg} avatar />
</Menu.Item>
</Menu.Menu>
<Menu.Menu position={'right'}>
<Menu.Item>
<Button positive>Sign up</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
What could be wrong?
Your code working fine. Here is the working codepen. Issue may be some other custom styles will override your component Button styles.