Я новичок в React, поэтому я буду просить о помощи.
Я редактирую административный шаблон React, и у меня возникают трудности с раскладыванием моего бокового меню / навигации.
Я пробовал библиотеку реагировать на сложение, однако шрифты были не совпадают с моим общим дизайн.
Обратите внимание, что я использую дизайн материала bootstrap в боковом меню.
Вот код:
import React from 'react';
import logo from "../assets/sbc-logo.png";
import { MDBListGroup, MDBListGroupItem, MDBIcon } from 'mdbreact';
import { NavLink } from 'react-router-dom';
const sideNavigation = () => {
return (
<div className="sidebar-fixed position-fixed">
{<a href="#!" className="logo-wrapper waves-effect">
<img alt="MDB React Logo" className="img-fluid" src={logo}/>
</a>}
<br/>
<MDBListGroup className="list-group-flush">
<NavLink exact={true} to="/dashboard" activeClassName="activeClass">
<MDBListGroupItem>
<MDBIcon icon="chart-pie" className="mr-3"/>
Dashboard
</MDBListGroupItem>
</NavLink>
<NavLink to="#" activeClassName="">
<MDBListGroupItem class="list-group-item-header">
<MDBIcon icon="exchange-alt" className="mr-3"/>
Transfers
<NavLink to="/inbox" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="inbox" className="mr-2"/>
Inbox
</MDBListGroupItem>
</NavLink>
<NavLink to="/sent" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="paper-plane" className="mr-2"/>
Sent
</MDBListGroupItem>
</NavLink>
<NavLink to="/acknowledged" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="thumbs-up" className="mr-2"/>
Acknowledged
</MDBListGroupItem>
</NavLink>
<NavLink to="/bcpmode" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="power-off" className="mr-2"/>
BCP Mode
</MDBListGroupItem>
</NavLink>
</MDBListGroupItem>
</NavLink>
<NavLink to="#" activeClassName="">
<MDBListGroupItem>
<MDBIcon icon="file" className="mr-3"/>
Proof List
<NavLink to="/proofweb" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="globe-asia" className="mr-2"/>
Proof Web
</MDBListGroupItem>
</NavLink>
<NavLink to="/proofothers" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="ellipsis-h" className="mr-2"/>
Proof Others
</MDBListGroupItem>
</NavLink>
</MDBListGroupItem>
</NavLink>
<NavLink to="/misc" activeClassName="activeClass">
<MDBListGroupItem>
<MDBIcon icon="folder" className="mr-3"/>
Miscellaneous
</MDBListGroupItem>
</NavLink>
<NavLink to="#" activeClassName="">
<MDBListGroupItem>
<MDBIcon icon="file-alt" className="mr-3"/>
RPS
<NavLink to="/clientmaintenance" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="tools" className="mr-2"/>
Client Maintenance
</MDBListGroupItem>
</NavLink>
<NavLink to="/processftp" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="file-export" className="mr-2"/>
Process SFTP
</MDBListGroupItem>
</NavLink>
<NavLink to="/processpesonet" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="money-bill-wave" className="mr-2"/>
Process Pesonet
</MDBListGroupItem>
</NavLink>
<NavLink to="/overrideenrolment" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="unlock" className="mr-2"/>
Override Enrollment
</MDBListGroupItem>
</NavLink>
</MDBListGroupItem>
</NavLink>
<NavLink to="/messageconverter" activeClassName="activeClass">
<MDBListGroupItem>
<MDBIcon icon="edit" className="mr-3"/>
Message Converter
</MDBListGroupItem>
</NavLink>
<hr />
<NavLink exact={true} to="#" activeClassName="">
<MDBListGroupItem>
<MDBIcon icon="cog" className="mr-3"/>
Administrator
<NavLink to="/usermaintenance" activeClassName="activeClassItem">
<MDBListGroupItem>
<MDBIcon icon="users-cog" className="mr-2"/>
User Maintenance
</MDBListGroupItem>
</NavLink>
</MDBListGroupItem>
</NavLink>
</MDBListGroup>
</div>
);
}
export default sideNavigation;
main. css
.sidebar-fixed {
left: 0;
top: 0;
height: 100vh;
width: 270px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 1050;
background-color: #fff;
padding: 0rem 1rem 0rem 1rem;
}
.flexible-navbar {
transition: padding-left 0.5s;
padding-left: 270px;
background: #fff;
}
#content{
margin-left: 270px;
}
.sidebar-fixed .logo-wrapper img{
width: 100%;
padding-top: 0rem;
padding-left: 1rem;
padding-right: 1rem;
padding-bottom: 0rem;
}
.list-group-item {
display: block !important;
transition: background-color 0.3s;
overflow: hidden;
position: relative;
margin-right: -8px;
margin-bottom: -15.3px;
}
.list-group-item:hover {
color: #49505B;
text-decoration: none;
background-color: #f8f9fa
}
.list-group-item:hover {
color: #49505B;
text-decoration: none;
background-color: #f8f9fa
}
.list-group-item-header:hover {
color: #49505B;
text-decoration: none;
background-color: none;
}
.list-group-item-header:hover {
color: #49505B;
text-decoration: none;
background-color: none;
}
.list-group .active {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
пакет. json
{
"homepage": "http://jpcbautista-git1.github.io/cpex-frontend",
"name": "cpex-frontend",
"version": "1.0.0",
"description": "CPEX upgrade",
"author": "Test",
"license": "MIT",
"dependencies": {
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"axios": "^0.19.2",
"babel-preset-stage-2": "^6.24.1",
"bootstrap": "^4.4.1",
"classnames": "^2.2.6",
"font-awesome": "^4.7.0",
"google-map-react": "^1.0.6",
"mdbreact": "^4.25.4",
"react": "^16.7.0",
"react-bootstrap": "^1.0.0-beta.17",
"react-bootstrap-table-next": "^4.0.0",
"react-bootstrap-table2-filter": "^1.3.1",
"react-bootstrap-table2-paginator": "^2.1.1",
"react-csv": "^2.0.1",
"react-dom": "^16.7.0",
"react-idle-timer": "^4.2.12",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.3",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"gh-pages": "^2.2.0"
}
}
TIA