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
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
}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' }}>41
<MDBSideNav42
backdrop={showV1Backdrop}43
constant={!showV1Backdrop}44
isOpen={showV1}45
absolute46
getOpenState={(e: any) => setShowV1(e)}47
>48
<MDBSideNavMenu>49
<MDBSideNavItem>50
<MDBSideNavLink>51
<MDBIcon icon='chart-area' className='fa-fw me-3' />52
Website traffic53
</MDBSideNavLink>54
</MDBSideNavItem>55
<MDBSideNavItem>56
<MDBSideNavLink>57
<MDBIcon icon='chart-pie' className='fa-fw me-3' />58
Sales59
</MDBSideNavLink>60
</MDBSideNavItem>61
<MDBSideNavItem>62
<MDBSideNavLink>63
<MDBIcon icon='chart-line' className='fa-fw me-3' />64
Subscriptions65
</MDBSideNavLink>66
</MDBSideNavItem>67
<MDBSideNavItem>68
<MDBSideNavLink69
icon='angle-down'70
shouldBeExpanded={collapseOpened === 'accordionCollapse1'}71
onClick={() => toggleAccordion('accordionCollapse1')}72
>73
<MDBIcon fas icon='cogs' className='fa-fw me-3' />74
Settings75
</MDBSideNavLink>76
<MDBSideNavCollapse id='accordionCollapse1' show={collapseOpened === 'accordionCollapse1'}>77
<MDBSideNavLink>Profile</MDBSideNavLink>78
<MDBSideNavLink>Account</MDBSideNavLink>79
</MDBSideNavCollapse>80
</MDBSideNavItem>81
<MDBSideNavItem>82
<MDBSideNavLink83
icon='angle-down'84
shouldBeExpanded={collapseOpened === 'accordionCollapse2'}85
onClick={() => toggleAccordion('accordionCollapse2')}86
>87
<MDBIcon fas icon='lock' className='fa-fw me-3' />88
Password89
</MDBSideNavLink>90
<MDBSideNavCollapse id='accordionCollapse2' show={collapseOpened === 'accordionCollapse2'}>91
<MDBSideNavLink>Request password</MDBSideNavLink>92
<MDBSideNavLink>Reset password</MDBSideNavLink>93
</MDBSideNavCollapse>94
</MDBSideNavItem>95
</MDBSideNavMenu>96
</MDBSideNav>97
98
<MDBNavbar expand='lg' light bgColor='light'>99
<MDBContainer fluid>100
<MDBBtn101
onClick={() => setShowV1(!showV1)}102
color='none'103
className='btn shadow-0 p-0 me-3 d-block d-xxl-none'104
>105
<MDBIcon icon='bars' size='lg' />106
</MDBBtn>107
108
<form className='d-none d-md-flex input-group w-auto my-auto'>109
<input110
autoComplete='off'111
type='search'112
className='form-control rounded'113
placeholder='Search (ctrl + "/" to focus)'114
style={{ minWidth: '225px' }}115
/>116
<span className='input-group-text border-0'>117
<i className='fas fa-search'></i>118
</span>119
</form>120
121
<MDBNavbarNav className='ms-auto d-flex flex-row'>122
<MDBNavbarItem style={{ cursor: 'pointer' }}>123
<MDBDropdown>124
<MDBDropdownToggle tag='a' className='me-3 me-lg-0 hidden-arrow nav-link'>125
<MDBIcon icon='bell' />126
<MDBBadge pill notification color='danger'>127
1128
</MDBBadge>129
</MDBDropdownToggle>130
<MDBDropdownMenu>131
<MDBDropdownItem link>Some news</MDBDropdownItem>132
<MDBDropdownItem link>Another news</MDBDropdownItem>133
<MDBDropdownItem link>Something else here</MDBDropdownItem>134
</MDBDropdownMenu>135
</MDBDropdown>136
</MDBNavbarItem>137
138
<MDBNavbarItem style={{ cursor: 'pointer' }}>139
<MDBDropdown>140
<MDBDropdownToggle tag='a' className='me-1 me-lg-0 hidden-arrow nav-link'>141
<MDBIcon className='m-0' flag='uk' />142
</MDBDropdownToggle>143
<MDBDropdownMenu>144
<MDBDropdownItem link>145
<MDBIcon flag='uk' />146
English <MDBIcon color='success' icon='check' className='ms-2' />147
</MDBDropdownItem>148
<MDBDropdownItem divider />149
<MDBDropdownItem link>150
<MDBIcon flag='pl' />151
Polski152
</MDBDropdownItem>153
<MDBDropdownItem link>154
<MDBIcon flag='cn' />155
中文156
</MDBDropdownItem>157
<MDBDropdownItem link>158
<MDBIcon flag='jp' />159
日本語160
</MDBDropdownItem>161
<MDBDropdownItem link>162
<MDBIcon flag='de' />163
Deutsch164
</MDBDropdownItem>165
<MDBDropdownItem link>166
<MDBIcon flag='fr' />167
Français168
</MDBDropdownItem>169
<MDBDropdownItem link>170
<MDBIcon flag='es' />171
Español172
</MDBDropdownItem>173
<MDBDropdownItem link>174
<MDBIcon flag='ru' />175
Русский176
</MDBDropdownItem>177
<MDBDropdownItem link>178
<MDBIcon flag='pt' />179
Português180
</MDBDropdownItem>181
</MDBDropdownMenu>182
</MDBDropdown>183
</MDBNavbarItem>184
185
<MDBNavbarItem style={{ cursor: 'pointer' }}>186
<MDBDropdown>187
<MDBDropdownToggle tag='a' className='hidden-arrow nav-link d-flex align-items-center'>188
<img189
src='https://mdbootstrap.com/img/new/avatars/2.jpg'190
className='rounded-circle'191
height='22'192
alt='Avatar'193
loading='lazy'194
/>195
</MDBDropdownToggle>196
<MDBDropdownMenu>197
<MDBDropdownItem link>My profile</MDBDropdownItem>198
<MDBDropdownItem link>Settings</MDBDropdownItem>199
<MDBDropdownItem link>Log out</MDBDropdownItem>200
</MDBDropdownMenu>201
</MDBDropdown>202
</MDBNavbarItem>203
</MDBNavbarNav>204
</MDBContainer>205
</MDBNavbar>206
<MDBContainer className='pt-4 pt-lg-5'>207
<h1>Dashboard</h1>208
</MDBContainer>209
</header>210
</MDBCol>211
</MDBRow>212
</MDBContainer>213
);214
}215
216
export default App;217
Console errors: 0