HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
<meta name="theme-color" content="#000000" />8
<meta9
name="description"10
content="Web site created using create-react-app"11
/>12
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />13
<link14
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"15
rel="stylesheet"16
/>17
<link18
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"19
rel="stylesheet"20
/>21
22
<!--23
manifest.json provides metadata used when your web app is installed on a24
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/25
-->26
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />27
<!--28
Notice the use of %PUBLIC_URL% in the tags above.29
It will be replaced with the URL of the `public` folder during the build.30
Only files inside the `public` folder can be referenced from the HTML.31
32
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will33
work correctly both with client-side routing and a non-root public URL.34
Learn how to configure a non-root public URL by running `npm run build`.35
-->36
<title>MDBReact5 Template App</title>37
</head>38
<body>39
<noscript>You need to enable JavaScript to run this app.</noscript>40
<div id="root"></div>41
<!--42
This HTML file is a template.43
If you open it directly in the browser, you will see an empty page.44
45
You can add webfonts, meta tags, or analytics to this file.46
The build step will place the bundled scripts into the <body> tag.47
48
To begin the development, run `npm start` or `yarn start`.49
To create a production bundle, use `npm run build` or `yarn build`.50
-->51
</body>52
</html>53
SCSS
xxxxxxxxxx1
@media (min-width: 1400px) {2
main,3
header,4
#main-navbar {5
padding-left: 240px;6
}7
}8
9
.navbar-nav {10
width: auto !important;11
}JS (TypeScript)
xxxxxxxxxx1
import React, { useState } from 'react';2
import { 3
MDBContainer,4
MDBNavbar,5
MDBCard,6
MDBCardBody,7
MDBNavbarBrand,8
MDBRipple,9
MDBIcon,10
MDBNavbarNav,11
MDBNavbarItem,12
MDBBtn,13
MDBDropdown,14
MDBDropdownToggle,15
MDBDropdownMenu,16
MDBDropdownItem,17
MDBRow,18
MDBCol,19
MDBBadge,20
MDBSideNav,21
MDBSideNavMenu,22
MDBSideNavItem,23
MDBSideNavLink,24
MDBSideNavCollapse25
} from 'mdb-react-ui-kit';26
27
function App() {28
const [showV1, setShowV1] = useState(true);29
const [showV1Backdrop, setShowV1Backdrop] = useState(false);30
const [collapseOpened, setCollapseOpened] = useState('accordionCollapse1');31
32
const toggleAccordion = (value: string) => {33
value !== collapseOpened ? setCollapseOpened(value) : setCollapseOpened('');34
};35
36
return (37
<MDBContainer fluid>38
<MDBRow className='justify-content-center'>39
<MDBCol md='12'>40
<header style={{ position: 'relative', overflow: 'hidden', minHeight: '600px', paddingLeft: '70px' }}>41
<MDBSideNav42
backdrop={showV1Backdrop}43
constant={!showV1Backdrop}44
isOpen={showV1}45
slim46
slimCollapsed={!collapseOpened}47
absolute48
getOpenState={(e: any) => setShowV1(e)}49
>50
<MDBSideNavMenu>51
<MDBSideNavItem>52
<MDBSideNavLink>53
<MDBIcon icon='chart-area' className='fa-fw me-3' />54
<span className='sidenav-non-slim'>Website traffic</span>55
</MDBSideNavLink>56
</MDBSideNavItem>57
<MDBSideNavItem>58
<MDBSideNavLink>59
<MDBIcon icon='chart-pie' className='fa-fw me-3' />60
<span className='sidenav-non-slim'>Sales</span>61
</MDBSideNavLink>62
</MDBSideNavItem>63
<MDBSideNavItem>64
<MDBSideNavLink>65
<MDBIcon icon='chart-line' className='fa-fw me-3' />66
<span className='sidenav-non-slim'>Subscriptions</span>67
</MDBSideNavLink>68
</MDBSideNavItem>69
<MDBSideNavItem>70
<MDBSideNavLink71
icon='angle-down'72
shouldBeExpanded={collapseOpened === 'accordionCollapse1'}73
onClick={() => toggleAccordion('accordionCollapse1')}74
>75
<MDBIcon fas icon='cogs' className='fa-fw me-3' />76
<span className='sidenav-non-slim'>Settings</span>77
</MDBSideNavLink>78
<MDBSideNavCollapse id='accordionCollapse1' show={collapseOpened === 'accordionCollapse1'}>79
<MDBSideNavLink>Profile</MDBSideNavLink>80
<MDBSideNavLink>Account</MDBSideNavLink>81
</MDBSideNavCollapse>82
</MDBSideNavItem>83
<MDBSideNavItem>84
<MDBSideNavLink85
icon='angle-down'86
shouldBeExpanded={collapseOpened === 'accordionCollapse2'}87
onClick={() => toggleAccordion('accordionCollapse2')}88
>89
<MDBIcon fas icon='lock' className='fa-fw me-3' />90
<span className='sidenav-non-slim'>Password</span>91
</MDBSideNavLink>92
<MDBSideNavCollapse id='accordionCollapse2' show={collapseOpened === 'accordionCollapse2'}>93
<MDBSideNavLink>Request password</MDBSideNavLink>94
<MDBSideNavLink>Reset password</MDBSideNavLink>95
</MDBSideNavCollapse>96
</MDBSideNavItem>97
</MDBSideNavMenu>98
</MDBSideNav>99
100
<MDBNavbar expand='lg' light bgColor='light'>101
<MDBContainer fluid>102
<MDBNavbarBrand>103
<img104
src='https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp'105
height='15'106
alt='MDB Logo'107
loading='lazy'108
/>109
</MDBNavbarBrand>110
111
<form className='d-none d-md-flex input-group w-auto my-auto'>112
<input113
autoComplete='off'114
type='search'115
className='form-control rounded'116
placeholder='Search (ctrl + "/" to focus)'117
style={{ minWidth: '225px' }}118
/>119
<span className='input-group-text border-0'>120
<i className='fas fa-search'></i>121
</span>122
</form>123
124
<MDBNavbarNav className='ms-auto d-flex flex-row'>125
<MDBNavbarItem style={{ cursor: 'pointer' }}>126
<MDBDropdown>127
<MDBDropdownToggle tag='a' className='me-3 me-lg-0 hidden-arrow nav-link'>128
<MDBIcon icon='bell' />129
<MDBBadge pill notification color='danger'>130
1131
</MDBBadge>132
</MDBDropdownToggle>133
<MDBDropdownMenu>134
<MDBDropdownItem link>Some news</MDBDropdownItem>135
<MDBDropdownItem link>Another news</MDBDropdownItem>136
<MDBDropdownItem link>Something else here</MDBDropdownItem>137
</MDBDropdownMenu>138
</MDBDropdown>139
</MDBNavbarItem>140
141
<MDBNavbarItem style={{ cursor: 'pointer' }}>142
<MDBDropdown>143
<MDBDropdownToggle tag='a' className='me-1 me-lg-0 hidden-arrow nav-link'>144
<MDBIcon className='m-0' flag='uk' />145
</MDBDropdownToggle>146
<MDBDropdownMenu>147
<MDBDropdownItem link>148
<MDBIcon flag='uk' />149
English <MDBIcon color='success' icon='check' className='ms-2' />150
</MDBDropdownItem>151
<MDBDropdownItem divider />152
<MDBDropdownItem link>153
<MDBIcon flag='pl' />154
Polski155
</MDBDropdownItem>156
<MDBDropdownItem link>157
<MDBIcon flag='cn' />158
中文159
</MDBDropdownItem>160
<MDBDropdownItem link>161
<MDBIcon flag='jp' />162
日本語163
</MDBDropdownItem>164
<MDBDropdownItem link>165
<MDBIcon flag='de' />166
Deutsch167
</MDBDropdownItem>168
<MDBDropdownItem link>169
<MDBIcon flag='fr' />170
Français171
</MDBDropdownItem>172
<MDBDropdownItem link>173
<MDBIcon flag='es' />174
Español175
</MDBDropdownItem>176
<MDBDropdownItem link>177
<MDBIcon flag='ru' />178
Русский179
</MDBDropdownItem>180
<MDBDropdownItem link>181
<MDBIcon flag='pt' />182
Português183
</MDBDropdownItem>184
</MDBDropdownMenu>185
</MDBDropdown>186
</MDBNavbarItem>187
188
<MDBNavbarItem style={{ cursor: 'pointer' }}>189
<MDBDropdown>190
<MDBDropdownToggle tag='a' className='hidden-arrow nav-link d-flex align-items-center'>191
<img192
src='https://mdbootstrap.com/img/new/avatars/2.jpg'193
className='rounded-circle'194
height='22'195
alt='Avatar'196
loading='lazy'197
/>198
</MDBDropdownToggle>199
<MDBDropdownMenu>200
<MDBDropdownItem link>My profile</MDBDropdownItem>201
<MDBDropdownItem link>Settings</MDBDropdownItem>202
<MDBDropdownItem link>Log out</MDBDropdownItem>203
</MDBDropdownMenu>204
</MDBDropdown>205
</MDBNavbarItem>206
</MDBNavbarNav>207
</MDBContainer>208
</MDBNavbar>209
<MDBContainer className='pt-4 pt-lg-5'>210
<h1>Dashboard</h1>211
</MDBContainer>212
</header>213
</MDBCol>214
</MDBRow>215
</MDBContainer>216
);217
}218
219
export default App;220
Console errors: 0