score:0
well, i also used ant design sider and i am using version 4.4.1. not sure what you want to acheive, so i am sharing the whole code with you.
import react from 'react';
import { route, switch, navlink, redirect, withrouter } from 'react-router-dom'
import {routecomponentprops} from "react-router";
import { layout, menu } from 'antd';
import {
desktopoutlined,
piechartoutlined,
useroutlined,
settingoutlined
} from '@ant-design/icons';
import shipper from '../shipper/shipper'
const { header, content, footer, sider } = layout;
const { submenu } = menu;
// type whatever you expect in 'this.props.match.params.*'
type pathparamstype = {
param1: string,
}
// your component own properties
type propstype = routecomponentprops<pathparamstype> & {
}
class sidebar extends react.component<propstype> {
state = {
collapsed: false,
};
oncollapse = (collapsed: any) => {
this.setstate({ collapsed });
};
render() {
let { pathname } = this.props.location;
return (
<layout style={{ minheight: '100vh' }}>
<header classname="header">
<div classname="logo" />
<menu mode="horizontal" theme="dark" classname="flex-setting">
<submenu icon={<settingoutlined />} title="settings">
<menu.itemgroup title="basic settings">
<menu.item key="setting:2">
<a href={"/accounts/logout/"} target="_self">
signout
</a>
</menu.item>
</menu.itemgroup>
</submenu>
</menu>
</header>
<layout>
<sider collapsible collapsed={this.state.collapsed} oncollapse={this.oncollapse}>
{/* <div classname="logo" /> */}
<menu theme="dark"
defaultselectedkeys={['/shipper']}
selectedkeys={[pathname]}
mode="inline">
<menu.item key="/shipper" icon={<piechartoutlined />}>
<navlink to="/shipper">
<span>shipper</span>
</navlink>
</menu.item>
</submenu>
</menu>
</sider>
<layout classname="site-layout">
{/* <header classname="site-layout-background" style={{ padding: 0 }} /> */}
<content style={{ margin: "16px 16px", background: "#fff" }}>
<div style={{ padding: 24, background: "#fff", minheight: 360 }}>
<switch>
<route exact path="/" render={() => (
<redirect to="/shipper"/>
)}/>
<route path="/shipper">
<shipper />
</route>
</switch>
</div>
</content>
<footer style={{ textalign: 'center' }}>copyrights © 2020 all rights reseverd by company.</footer>
</layout>
</layout>
</layout>
);
}
}
export default withrouter(sidebar);
my css is following:
.header {
display: inherit;
}
.logo {
height: 32px;
width: 35px;
margin: 16px;
background-image: url("main-logo.jpg");
}
.flex-setting {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
alot of things not necessary for you, so remove that part. once you follow this, you will achieve something link this:
score:0
remove " #components-layout-demo-custom-trigger" from css file and it will work. i am sharing my css file. app.css
@import "~antd/dist/antd.css";
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}
score:0
because the example has trigger class id # component-layout-demo-custom-trigger in front of it but the copied code also has # component-layout-demo-custom-trigger removed enter image description here
Source: stackoverflow.com
Related Query
- Ant Design Layout is not working as expected
- Ant Design Sidebar Layout Example Not working as expected
- defaultValue of Input not working correctly on ant design
- Ant design sort table code not working on the react typescript
- Ant design Form validation is not working and not updating input values when component is from a state that is passed from a function
- React ant design form validation not working (on submit)
- A toggle(Switch) in every row of a Ant Design table is not working as excepted
- Ant design type script Input field validation not working
- EditableProTable Edit is Not working in ant design pro
- React Ant Design table filtering not working
- Jest expect.any() not working as expected
- Formik & yup form validation not working as expected with VirtualizedSelect
- In React, onMouseEnter or hover is not working as expected
- fireEvent.keyDown not working as expected on my Jest + React Testing Library test
- React Ant Design styles not loading
- ReactJS - ant design - Fix Footer with Layout
- Ant Design error: "Form.create() getFieldDecorator is not a function"
- Ant Design Input Component not updating value
- 100% height not working for Drawer, Material Design React
- Babel plugin-proposal-decorators not working as expected
- react-bootstrap not working as expected
- CSS Modules + Ant design in ReactJs does not work
- sequential setState calls not working as expected
- React onLoad img event not working as expected
- React - Ant Design, Form with getFieldDecorator and initialValue not working in single chechbox
- Ant Design form element is not submitting when the form button is clicked
- <picture /> element is not working as expected in Safari browser, while using React
- Ant design date and time pickers do not pass value through Formik (react)
- React Ionic (v5): IonReactRouter & IonRouterOutlet Not Working as Expected
- React Redux is not working as expected with Next.js & NodeJS
More Query from same tag
- Issue with useReducer hook and reducer function
- How to give child component control over react hook in root component
- Same type to Multiple typescript variable
- How to get data from different collections in firebase from react?
- ReactCSSTransitionGroup not working with controlled Component
- Why do I get an array of promises when getting data from the blockchain with useEffect?
- Create React List with Remove Button on Hover
- Bootstrap progress bar issue in react component
- Rendering a Bootstrap Component Using JSX
- How I show value of an input inside a span tag in the form of typing effect?
- How does react redux's actions have access to dispatch and getState?
- extract props from function into components in React
- ReferenceError: jQuery is not defined in react-bootstrap-select
- When .filter when dismiss event is called, it throws an error and doesn't work. It says cannot read the property 'filter' of undefined
- How can I update transition-delay value via ReactJS Component?
- React redux Form checkbox `defaultChecked` not working
- Problems reordering child components from parent's state
- align button right reactjs
- the best way to pass initial state with configureStore after migration from react-redux to redux-toolkit
- how to convert object to valid css styles in javascript?
- Can't reproduce fade-in effect in React
- Logic to render a component only once
- How can I receive a JSON:API post of nested attributes in Ruby on Rails?
- Why there is 2 setState's available
- Why the compiler looks for dependencies packages on src folder instead of node_modules folder in a React app running on Ubuntu
- Called componentDidMount twice
- How to mock a function with .then from a hook
- Closing a popper MUI using ClickAwayListener affects everything inside
- React-leaflet how to resetStyle
- React Boostrap NavDropdown.Item closes modal when NavBar is closed