I'm trying to create a header and sidebar where the header sits just left of the sidebar and not overlayed like the image below.
I've created the Sidebar and Header components separately in different files and am importing both to render into an App.js file like below:
App.js:
render() {
return (
<div className='fp-wrapper'>
<AppSidebar />
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
The issue is that the two components are being rendered ontop of each other (see screenshot). Is there any way to build these components separately and have them fit together?
I have found that one way to solve this is to build the components directly to the sidebar (see Sidebar.Pusher & text Stuff) which is rendered correctly sitting right of the sidebar whereas the header is being overlapped.
Sidebar:
render() {
const { activeItem } = this.state
return (
<Sidebar.Pusher>
<Sidebar
as={Menu}
animation='push'
direction='left'
icon='labeled'
inverted
visible='true'
vertical
width='thin'
>
<Menu.Item as='a'>
<Icon name='home' />
Lexis
</Menu.Item>
<Menu.Item as='a'>
Page 1
</Menu.Item>
<Menu.Item as='a'>
Page 2
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
Stuff
</Sidebar.Pusher>
One way to do it would be wrapping the <AppSidebar> in a <div className="sidebar"> and use display: flex to display them side by side, like this.
render(){
return (
<div className='fp-wrapper'>
<div className="sidebar">
<AppSidebar />
</div>
<div className='fp-panel-main'>
<AppHeader />
</div>
</div>
);
}
and add CSS to that
.fp-wrapper {
width: 100%;
display: flex;
flex-wrap: nowrap; //This will keep the layout at all screen sizes.
}
.sidebar {
width: 30%;
}
.fp-panel-main {
width: 70%;
}
Note: You can also add a className or id to <SideBar.Pusher> and you wouldn't need to wrap the <AppSideBar /> with the <div className="sidebar">.
Related
I want my sidenavbar to continue over the whole page but when i add the other
sections(home, contact & projects) which are just regular functional components
with a div and h1, they create their own space on the page. is there a better
solution to creating different sections on a page? i have tried rendering the components
from index and app.js but without success, i am currently rendering SidenavBar
from index.js and my sections are getting rendered from app.js.
import React from "react";
import "../Section.css";
function HomeSection() {
return (
<div className="Section" id="Home">
HomeSection
<h1>Home</h1>
</div>
);
}
export default HomeSection;
here is an example of the sections, the section.css only centers the text on the page.
function SideNavBar() {
const [titleActive, setTitleActive] = useState(HomeSection);
return (
<div className="SideNavBar">
<Stickybox>
<ul className="SideBarList">
{SideBarInfo.map((info, key) => {
return (
<li
key={key}
className="rad"
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
>
<Link
onClick={() => {
console.log(info.title + " clicked");
setTitleActive(info.title);
}}
id={titleActive === info.title ? "active" : ""}
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="title">{info.title}</div>
/Link>
<Link
activeClass="active"
to={info.title}
spy={true}
smooth={true}
offset={50}
duration={500}
>
<div id="bild">{info.bild}</div>
</Link>
</li>
);
})}
</ul>
</Stickybox>
</div>
);
}
export default SideNavBar;
// this is the css for sidebar
.SideNavBar {
width: 250px;
min-height: 5000px;
background-color: rgb(47, 167, 223);
height: 100vh;
}
this is my sidenavbar component.
My sidenavbar works as intended if i remove the sections, i have tried setting a max width and transparent background for the sections so they dont overwrite the sidenavbar but they still overwrite it. what is the correct way to create different sections?
i added a red background for the home section so its easier to see what its doing.
You probably want to do something like this for your sidebar to fix it on the side and have it take up the full screen.
This will fix the sidebar in a position on the screen (0px away from the top and 0px away from the bottom).
You then define the width and you have a fixed sidebar!
Hope that helps!
.sidebar {
top: 0px;
bottom: 0px;
width: 200px;
position: fixed;
background-color: blue;
}
<div class='sidebar'></div>
I am using React with Ant Design and I have a vertical Sider containing a Menu.
Is it possible to align Menu.Items to the bottom of the sider/menu? Below is an image of the Sider.
Here's my code:
<Sider
className="sider"
collapsible
collapsed={this.state.collapsed}
onCollapse={this.toggleCollapse}>
<Menu theme="dark" mode="inline" defaultSelectedKeys={[this.state.currentRoute]}>
<Menu.Item key="/users">
<Icon type="user" />
<span>Brukere</span>
<Link to='/users' />
</Menu.Item>
<Menu.Item key="/secret">
<Icon type="plus" />
<span>Registrer ny bruker</span>
<Link to='/secret' />
</Menu.Item>
<Menu.Item key="/Whatevs">
<Icon type="check" />
<span>Rapporterte feil</span>
<Link to='/Whatevs' />
</Menu.Item>
<Menu.Divider />
<Menu.Item onClick={this.logOut} key="/logOut">
<Icon type="logout" />
<span>Logg ut</span>
<Link to='/admin/login' />
</Menu.Item>
</Menu>
</Sider>
You can add custom css with position absolute and then set bottom = 0
For me I wanted to add a logo at the end of the sidebar so I did like so
<Menu.Item
title=""
style={{
position: 'absolute',
bottom: 0,
zIndex: 1,
transition: 'all 0.2s',
}}
key="6"
>
LOGO
</Menu.Item>
NOTE: I recommend you never change antd css directly, unless it's absolutely necessary.
Inspect the element (Crtl+Shift+I) in chrome or whatever browser you are using.
Find what css class is being used for Menu.
Update that css to use display:flex if it is not already using it.
Then add the style flex-direction:column.
After that, for the first Menu.type add style
margin-top: auto.
You should have a global css file in React where you can override the css in Ant Design.
It's possible to align the Menu.Items to the bottom of the sider if you change the styles coming from the Antd library. You can always inspect what classes you need to change in Chrome Dev Tools (they all start with .ant). In your .less file change the .ant-menu-dark.ant-menu-inline class:
.ant-menu-dark.ant-menu-inline {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
I would also add a margin to the bottom of your last menu item, otherwise it will stay in the very bottom corner of the screen:
.ant-menu-dark.ant-menu-inline .ant-menu-item:last-child {
margin-bottom: 40px;
}
This is how it looks now:
It is hard to edit menu items inside a single menu. Instead, create two separate menus. One will hold items that will appear at the top, the other for the bottom items.
<StyledMenuContainer>
<Menu theme='dark' defaultSelectedKeys={["Orders"]} items={["Orders", "User"].map(menuKey => ({ label: menuKey, key: menuKey }))} />
<Menu theme='dark' items={["Settings", "Logout"].map(menuKey => ({ label: menuKey, key: menuKey }))} />
</StyledMenuContainer>;
StyledMenuContainer will justify each of the menus to the opposite side with space-between.
const StyledMenuContainer = styled('div', {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
height: 'calc(100% - 64px)',
});
You need to be careful about the height of the container. If you have a logo on the sider, then subtract its height from the container. Eventually, you will have your desired outcome.
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
The footer does not stay at the bottom of the page, despite following the materialize docs and creating the header, main, footer format in my app.
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
Here is the render method of app.js:
render() {
return (
<React.Fragment>
<Header />
<main>
... my stuff here ...
</main>
<Footer />
</React.Fragment>
);
}
Here is the Header component:
export default function About() {
return (
<header></header>
);
}
Here is the Footer component (copied exact from the materialize docs):
export default function About() {
return (
<footer className="page-footer">
<div className="container">
<div className="row">
<div className="col l6 s12">
<h5 className="white-text">Footer Content</h5>
<p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div className="col l4 offset-l2 s12">
<h5 className="white-text">Links</h5>
<ul>
<li><a className="grey-text text-lighten-3" href="#!">Link 1</a></li>
</ul>
</div>
</div>
</div>
<div className="footer-copyright">
<div className="container">
© 2014 Copyright Text
<a className="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
);
}
The footer does display correctly but refuses to go to the bottom (be a sticky footer).
I have this in the head of index.html (the docs say this is how to make a sticky footer):
<script>
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</script>
(I think it is because react mounts my app content inside a <div id="root"> in index.html and thus breaks the header, main, footer format materialize requires for the footer to be sticky.)
I just need a way to make the footer sticky and stay at the bottom of the page while using react.
In react jsx you must use className instead of class.
class is a reserved word in javascript.
You can use a <div> tag instead of a <React.Fragment> with display: flex and min-height: 100vh. In the <Footer /> tag you can apply a style with align-self: flex-end it should align the footer to the bottom of the page.
You can see this fiddle: https://jsfiddle.net/brunohgv/cjypx5wL/4/
Good afternoon. I'm new to web development and I'm not able to put the ant design menu (https://ant.design/components/menu/) at 100% of the screen height.
I tried to put <Layout style = {{height:" 100vh "}}> before the but it did not work.
Here's the code I'm using
.
.
.
.
.
import React from 'react'
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;
export class SideMenu extends React.Component {
constructor(props){
super(props)
this.state = {collapsed: false}
}
toggleCollapsed (){
this.setState({
collapsed: !this.state.collapsed
})
}
render() {
return (
<div style={{ width: 256 }}>
<Menu
defaultSelectedKeys={[]}
defaultOpenKeys={[]}
mode="inline"
theme="light"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="0">
<div onClick={this.toggleCollapsed.bind(this)}>
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menufold'}/>
</div>
</Menu.Item>
...
<Menu.Item key="5">
<Icon type="rocket" />
<span>Funções</span>
</Menu.Item>
</Menu>
</div>
);
}
}
Thanks for your help.
Try to manage separate style sheet(in my case menu.less) and put it this code
it should be work
.menu-style {
height: 100vh;
width: 200px;
position: fixed;
}
just try it.
You can use ref get the DOM you wanted reference height. Then use the height at some Components.
function refIt(theDOM) {
const height = theDOM.clientHeight;
this.setState({ height });
}
return (<div ref={theDOM => refIt(theDOM)}>
<div height={this.state.height}>
</div>
</div>);
i using the semantic-ui-react. I have a Container main which has an Segment inside for show page details. but this Segment's height is changing according content inside. i want to set an mix height to alway stay fixed size. here is my code:
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Header />
<Segment />
</Container>
</div>
);
}
}
You can set minHeight style/css on your component or any div inside :
<Segment style={{ minHeight: 15 }} />