I'm using Ant design layout in my React App.
I have added header and sidebar, I have some issue on the logo, when I click the toggle, after that the logo is not responsive. How do I make it responsive?
Here is stazkblitz.
code
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Layout, Menu } from 'antd';
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
} from '#ant-design/icons';
const { Header, Sider, Content } = Layout;
class SiderDemo extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
}
ReactDOM.render(<SiderDemo />, document.getElementById('container'));
You can remove the <div> with background image (current implementation in the question) to show the logo.
And, use <img> with CSS to make it responsive.
CSS:
.logo {
width: 100%;
max-width: 169px;
height: 24px;
}
JSX:
<img
className="logo"
src="https://www.skysens.io/images/white-logo.png"
/>
Related
I'm trying to get rid of the elevation shadow of the navbar over the sidebar.
I'm using Material-UI's AppBar for my NavBar component.
export default function NavBar() {
return (
<div>
<AppBar position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I am using a custom sidebar component,
.sidebar {
left: 0;
top: 64px;
height: 100vh;
width: 70px;
background-color: #3f50b5;
position: fixed;
}
.sidebar::before{
display: none;
}
I don't want to lose the elevation/shadow of the entire NavBar, just the section on the left where it's over the Sidebar.
Adding this because I spent a lot of timing finding a simple answer to removing the elevation.
The simplest way to remove the shadow is by adding elevation prop to the AppBar.
<AppBar position="fixed" elevation={0}>
you could add a ::after pseudo element to your navbar to do the job. This element would have the width of your sidebar, and would be have a top property accordingly to your navbar.
Given the AppBar itself has some different breakpoints you would need to change top accordingly:
const useStyles = makeStyles((theme) => ({
root: {
"&::after": {
position: "absolute",
content: '""',
width: "70px",
height: "8px",
top: "48px",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.down("xs")]: {
top: "56px"
},
"#media (orientation: landscape)": {
top: "48px"
},
[theme.breakpoints.up("sm")]: {
top: "64px"
}
}
}
}));
export default function NavBar() {
const classes = useStyles();
return (
<div>
<AppBar classes={{ root: classes.root }} position="fixed" elevation={4}>
<Toolbar variant="regular">
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
</div>
);
}
I created a sandbox with only the navbar, and a darker shadow to enhance contrast:
I have a container hosting a radio button on the left and other buttons on the right. For some reason, I am unable to align the radio buttons inline with the buttons on the right. Please advice me on a way to fix this.
This is what I have so far:
Code:
import React, { Component } from "react";
import { Box, Flex } from "#rebass/grid";
import cx from "classnames";
import styled from "styled-components/macro";
import {
Button,
ButtonGroup,
Classes,
Colors,
Divider,
Icon,
Radio,
RadioGroup
} from "#blueprintjs/core";
import { IconNames } from "#blueprintjs/icons";
import "normalize.css/normalize.css";
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import "#blueprintjs/select/lib/css/blueprint-select.css";
import "bootstrap/dist/css/bootstrap.css";
const ScenarioIcon = styled(Button)`
transition: all 0.2s ease;
}
`;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Flex>
<Box width={"100%"}>
<div
style={{
padding: "20px",
backgroundColor: "red"
}}
className={cx("bp3-card bp3-interactive")}
>
<Flex alignItems="center" style={{ backgroundColor: "green" }}>
<RadioGroup onChange={() => {}} selectedValue={1}>
<Radio
style={{ backgroundColor: "yellow" }}
className={cx(Classes.TEXT_LARGE)}
label={"Sample"}
value={1}
/>
</RadioGroup>
<Box flex="auto" />
<ButtonGroup>
<ScenarioIcon
className="utility-button"
icon={<Icon icon={IconNames.EDIT} color={Colors.WHITE} />}
minimal={true}
title="Edit"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon icon={IconNames.DUPLICATE} color={Colors.WHITE} />
}
minimal={true}
title="Copy"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.DOCUMENT_SHARE}
color={Colors.WHITE}
/>
}
minimal={true}
title={"Archive"}
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.TRASH}
color={Colors.RED1}
color={Colors.WHITE}
/>
}
minimal={true}
title="Delete"
/>
<Divider />
</ButtonGroup>
<Icon
icon={IconNames.CHEVRON_RIGHT}
color={Colors.WHITE}
className="align-self-center"
iconSize={20}
/>
</Flex>
</div>
</Box>
</Flex>
);
}
}
export default App;
CodeSandbox Link: Link
P.S: I am open to using bootstrap as well for alignment.
From what i see, there is some bottom margin to Radio.
If you use below style on 'Radio', it works just fine.
style={{ backgroundColor: "yellow", marginBottom: "0" }}
Set margin-bottom: 0; for label.
I have this code in which the hover selector doesn't work at all. Everything else when it comes to style works perfectly but the hover doesn't do anything visible.
import React from "react";
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const styles = {
divStyle: {
width: "300px",
height: "200px",
backgroundColor: "red",
margin: "30px",
'&:hover': {
border: '5px solid #000000',
bordeBottomColor: 'transparent',
borderRightColor: 'transparent'
}
}
};
const StartPage = ()=> {
return(
<React.Fragment>
<Paper>
<div style={styles.firstContainer}>
</div>
<div style={styles.secondContainer}>
<Grid container >
<Grid style={styles.Grid} item>
<div style={styles.gridDivStyle}>
<div style={styles.divStyle}></div>
<div style={styles.divStyle}></div>
</div>
<div style={styles.gridDivStyle}>
<div style={styles.divStyle}></div>
<div style={styles.divStyle}></div>
</div>
</Grid>
</Grid>
</div>
<div style={styles.lastContainer}>
</div>
</Paper>
</React.Fragment>
);
}
export default StartPage;
How can I make the hover selector work. Do I need to use the state from React in order to make the change?
if you want to use hover style , you can use the package
import { withStyles } from 'material-ui/styles';
Here is the code:
import React from "react";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
import { withStyles } from "#material-ui/styles";
const styles = {
divStyle: {
width: "300px",
height: "200px",
backgroundColor: "red",
margin: "30px",
"&:hover": {
border: "5px solid #000000",
bordeBottomColor: "transparent",
borderRightColor: "transparent"
}
}
};
const StartPage = props => {
return (
<React.Fragment>
<Paper>
<div style={styles.firstContainer} />
<div style={styles.secondContainer}>
<Grid container>
<Grid style={styles.Grid} item>
<div style={styles.gridDivStyle}>
<div className={props.classes.divStyle} /> // use the styles through className
<div className={props.classes.divStyle} />
</div>
<div style={styles.gridDivStyle}>
<div className={props.classes.divStyle} />
<div className={props.classes.divStyle} />
</div>
</Grid>
</Grid>
</div>
<div style={styles.lastContainer} />
</Paper>
</React.Fragment>
);
};
export default withStyles(styles)(StartPage);
Working Demo
I am trying to make a popup window with a description for the project whenever someone clicks the description button.
I can't figure out how to do it. I have looked for components in react-mdl but I don't know how to insert it to my program.
The hirarchy of the button is:
-App
---NAVBAR
---Pages
-------Projects
---------ProjectCard
------------description button
I have tried to integrate components from react-mdl, semantic-ui etc, but I couldn't figure out how to adapt it to my program.
Thanks in advance guys!
import React from "react";
import { Layout, Content } from "react-mdl";
import Pages from "./Pages";
import { NavBar } from "./NavBar";
import { LeftDrawer } from "./LeftDrawer";
class App extends React.Component {
render() {
return (
<div>
<Layout>
<NavBar />
<LeftDrawer />
<Content className="app-content">
<Pages />
</Content>
</Layout>
</div>
);
}
}
export default App;
import React from "react";
import { Tabs, Tab } from "react-mdl";
import { CProjects } from "./CProjects";
import { ReactProjects } from "./ReactProjects";
import { SwiftProjects } from "./SwiftProjects";
import { TypescriptProjects } from "./TypescriptProjects";
import { JavaProjects } from "./JavaProjects";
import { CPPProjects } from "./CPPProjects";
import { PythonProjects } from "./PythonProjects";
import { AssemblyProjects } from "./AssemblyProjects";
class Projects extends React.Component {
state = { activeTab: 0 };
handleChange = tabId => {
this.setState({ activeTab: tabId });
};
toggleCategiries = () => {
switch (this.state.activeTab) {
case 0:
return (
<div className="react-projects">
<ReactProjects />
</div>
);
case 1:
return (
<div className="typescript-projects">
<TypescriptProjects />
</div>
);
case 2:
return (
<div className="java-projects">
<JavaProjects />
</div>
);
case 3:
return (
<div className="c-projects">
<CProjects />
</div>
);
case 4:
return (
<div className="c++-projects">
<CPPProjects />
</div>
);
case 5:
return (
<div className="swift-projects">
<SwiftProjects />
</div>
);
case 6:
return (
<div className="python-projects">
<PythonProjects />
</div>
);
case 7:
return (
<div className="assembly-projects">
<AssemblyProjects />
</div>
);
default:
return <div>lala</div>;
}
};
render() {
return (
<div className="page">
<div className="categories">
<Tabs
activeTab={this.state.activeTab}
onChange={this.handleChange}
ripple
>
<Tab className="tab">React</Tab>
<Tab className="tab">TypeScript</Tab>
<Tab className="tab">Java</Tab>
<Tab className="tab">C</Tab>
<Tab className="tab">C++</Tab>
<Tab className="tab">Swift</Tab>
<Tab className="tab">Python</Tab>
<Tab className="tab">Assembly</Tab>
</Tabs>
{this.toggleCategiries()}
</div>
</div>
);
}
}
export default Projects;
import React from "react";
import {
Card,
CardTitle,
CardActions,
Button,
CardMenu,
IconButton,
CardText
} from "react-mdl";
import { Link } from "react-router-dom";
class ProjectCard extends React.Component {
render() {
const titleStyle = {
backgroundImage: "url(" + this.props.background + ")",
backgroundSize: "100% 100%",
color: "#fff",
height: "176px"
};
return (
<div>
<Card shadow={6} style={{ borderRadius: "6px" }}>
<CardTitle style={titleStyle}>{this.props.name}</CardTitle>
<CardText>{this.props.shortDescription}</CardText>
<CardActions border>
<div style={{ display: "flex", justifyContent: "center" }}>
<a href={this.props.github} target="_blank">
<Button colored>GitHub</Button>
</a>
<Button colored>Description</Button>
</div>
</CardActions>
<CardMenu style={{ color: "#fff" }}>
<IconButton name="share" />
</CardMenu>
</Card>
</div>
);
}
}
export default ProjectCard;
import React from "react";
import { Spring } from "react-spring/renderprops";
import ProjectCard from "./ProjectCard";
import backgroundImage from "../../additional-files/images/React_background.png";
export const ReactProjects = () => {
return (
<Spring
config={{ duration: 1000 }}
from={{ opacity: 0 }}
to={{ opacity: 1 }}
>
{props => (
<div style={props}>
<div className="projects">
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
<div className="project">
<ProjectCard
name="Lab1"
shortDescription="Encoder and Debug mode"
description="This is the desired description in Modal"
github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
background={backgroundImage}
/>
</div>
</div>
</div>
)}
</Spring>
);
};
I managed to do it with a Dialog component of evergreen ui.
Inserted it where the Description button was and inside it, I inserted the button
import React from "react";
import {
Card,
CardTitle,
CardActions,
Button,
CardMenu,
IconButton,
CardText
} from "react-mdl";
import Component from "#reach/component-component";
import { Pane, Dialog } from "evergreen-ui";
class ProjectCard extends React.Component {
state = {
active: false
};
handleToggle = () => {
this.setState({ active: !this.state.active });
};
actions = [
{ label: "Cancel", onClick: this.handleToggle },
{ label: "Save", onClick: this.handleToggle }
];
render() {
const titleStyle = {
backgroundImage: "url(" + this.props.background + ")",
backgroundSize: "100% 100%",
color: "#fff",
height: "176px"
};
return (
<div>
<Card shadow={6} style={{ borderRadius: "6px" }}>
<CardTitle style={titleStyle}>{this.props.name}</CardTitle>
<CardText>{this.props.shortDescription}</CardText>
<CardActions border>
<div style={{ display: "flex", justifyContent: "center" }}>
<a href={this.props.github} target="_blank">
<Button colored>GitHub</Button>
</a>
<Component initialState={{ isShown: false }}>
{({ state, setState }) => (
<Pane>
<Dialog
isShown={state.isShown}
title={this.props.name + " description"}
onCloseComplete={() => setState({ isShown: false })}
confirmLabel="close"
hasFooter={false}
>
<Pane height={1800} width="100%" backgroundColor="#ddd" style={{ borderRadius: '6px' }}>
<div style={{ padding: "1vw 0 0 1vw" }}>
{this.props.description}
</div>
</Pane>
</Dialog>
<Button colored onClick={() => setState({ isShown: true })}>
Description
</Button>
</Pane>
)}
</Component>
</div>
</CardActions>
<CardMenu style={{ color: "#fff" }}>
<IconButton name="share" />
</CardMenu>
</Card>
</div>
);
}
}
export default ProjectCard;
I made a single page app in react using ant design. I made the navbar on top fixed, now when scrolling the cards in the content are floating over the navbar.
Top menu/navbar code
import React,{Component} from 'react'
import {Layout, Menu, Row, Col, Icon} from 'antd'
import Logo from './Glogo.png'
const {Header}=Layout
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
export default class TopMenu extends Component{
render(){
return(
<Header style={{position: 'fixed', width: '100%' }}>
<img src={Logo} style={{height:"40px", width:"140px",
float:"left", marginTop:"10px"}}alt="Logo"/>
<Menu
theme="dark"
mode="horizontal"
style={{ lineHeight: '64px' }}
>
</Menu>
</Header>
)
}
}
In header i declared the position as fixed.
Content code:
import React, {Component} from 'react';
import {Layout, Card, Row, Col, List} from 'antd';
const {Content} = Layout;
class Dashboard extends Component{
constructor(props){
super();
this.state={
session_id:[
{
event:"underline",
timestamp:"10:30",
observation:["magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
]
}
}
render(){
return(
<Content style={{ padding: '0 50px', marginTop: 64, minHeight: "calc(100vh - 128px)" }}>
<div style={{ background: '#fff', padding: 24, minHeight: 500, marginBottom:"30px" }}>
{this.state.session_id.map((val, i)=>
<Card key={i}hoverable style={{margin:"15px", boxShadow:"0 0 10px gray "}}>
<Row gutter={16}>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Event" hoverable bordered={false}>
Name: {val.event}<br/>Time: {val.time}
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Observation" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.observation}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Suggestions" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.suggestions}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
</Row>
</Card>)}
</div>
</Content>
)
}
}
export default Dashboard;
The cards in the content are floating over the fixed header while the content itself is below the header.
I want the navbar to be on top of everthing else. What can i do.
May z-index will help you in your case.
<Header style={{position: 'fixed', width: '100%', zIndex: 100}}>