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 &copy; 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:

enter image description here

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


Related Query

More Query from same tag