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
body {2
margin: 0;3
font-family: Roboto, Helvetica, Arial, sans-serif;4
-webkit-font-smoothing: antialiased;5
-moz-osx-font-smoothing: grayscale;6
}7
8
code {9
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',10
monospace;11
}12
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
<a className='ripple d-flex justify-content-center py-4' href='#!'>49
<img50
id='MDB-logo'51
src='https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'52
alt='MDB Logo'53
draggable='false'54
/>55
</a>56
<MDBSideNavMenu>57
<MDBSideNavItem>58
<MDBSideNavLink>59
<MDBIcon icon='chart-area' className='fa-fw me-3' />60
Website traffic61
</MDBSideNavLink>62
</MDBSideNavItem>63
<MDBSideNavItem>64
<MDBSideNavLink>65
<MDBIcon icon='chart-pie' className='fa-fw me-3' />66
Sales67
</MDBSideNavLink>68
</MDBSideNavItem>69
<MDBSideNavItem>70
<MDBSideNavLink>71
<MDBIcon icon='chart-line' className='fa-fw me-3' />72
Subscriptions73
</MDBSideNavLink>74
</MDBSideNavItem>75
<MDBSideNavItem>76
<MDBSideNavLink77
icon='angle-down'78
shouldBeExpanded={collapseOpened === 'accordionCollapse1'}79
onClick={() => toggleAccordion('accordionCollapse1')}80
>81
<MDBIcon fas icon='cogs' className='fa-fw me-3' />82
Settings83
</MDBSideNavLink>84
<MDBSideNavCollapse id='accordionCollapse1' show={collapseOpened === 'accordionCollapse1'}>85
<MDBSideNavLink>Profile</MDBSideNavLink>86
<MDBSideNavLink>Account</MDBSideNavLink>87
</MDBSideNavCollapse>88
</MDBSideNavItem>89
<MDBSideNavItem>90
<MDBSideNavLink91
icon='angle-down'92
shouldBeExpanded={collapseOpened === 'accordionCollapse2'}93
onClick={() => toggleAccordion('accordionCollapse2')}94
>95
<MDBIcon fas icon='lock' className='fa-fw me-3' />96
Password97
</MDBSideNavLink>98
<MDBSideNavCollapse id='accordionCollapse2' show={collapseOpened === 'accordionCollapse2'}>99
<MDBSideNavLink>Request password</MDBSideNavLink>100
<MDBSideNavLink>Reset password</MDBSideNavLink>101
</MDBSideNavCollapse>102
</MDBSideNavItem>103
</MDBSideNavMenu>104
</MDBSideNav>105
106
<MDBNavbar expand='lg' light bgColor='light'>107
<MDBContainer fluid>108
<MDBBtn109
onClick={() => setShowV1(!showV1)}110
color='none'111
className='btn shadow-0 p-0 me-3 d-block d-xxl-none'112
>113
<MDBIcon icon='bars' size='lg' />114
</MDBBtn>115
116
<form className='d-none d-md-flex input-group w-auto my-auto'>117
<input118
autoComplete='off'119
type='search'120
className='form-control rounded'121
placeholder='Search (ctrl + "/" to focus)'122
style={{ minWidth: '225px' }}123
/>124
<span className='input-group-text border-0'>125
<i className='fas fa-search'></i>126
</span>127
</form>128
129
<MDBNavbarNav className='ms-auto d-flex flex-row'>130
<MDBNavbarItem style={{ cursor: 'pointer' }}>131
<MDBDropdown>132
<MDBDropdownToggle tag='a' className='me-3 me-lg-0 hidden-arrow nav-link'>133
<MDBIcon icon='bell' />134
<MDBBadge pill notification color='danger'>135
1136
</MDBBadge>137
</MDBDropdownToggle>138
<MDBDropdownMenu>139
<MDBDropdownItem link>Some news</MDBDropdownItem>140
<MDBDropdownItem link>Another news</MDBDropdownItem>141
<MDBDropdownItem link>Something else here</MDBDropdownItem>142
</MDBDropdownMenu>143
</MDBDropdown>144
</MDBNavbarItem>145
146
<MDBNavbarItem style={{ cursor: 'pointer' }}>147
<MDBDropdown>148
<MDBDropdownToggle tag='a' className='me-1 me-lg-0 hidden-arrow nav-link'>149
<MDBIcon className='m-0' flag='uk' />150
</MDBDropdownToggle>151
<MDBDropdownMenu>152
<MDBDropdownItem link>153
<MDBIcon flag='uk' />154
English <MDBIcon color='success' icon='check' className='ms-2' />155
</MDBDropdownItem>156
<MDBDropdownItem divider />157
<MDBDropdownItem link>158
<MDBIcon flag='pl' />159
Polski160
</MDBDropdownItem>161
<MDBDropdownItem link>162
<MDBIcon flag='cn' />163
中文164
</MDBDropdownItem>165
<MDBDropdownItem link>166
<MDBIcon flag='jp' />167
日本語168
</MDBDropdownItem>169
<MDBDropdownItem link>170
<MDBIcon flag='de' />171
Deutsch172
</MDBDropdownItem>173
<MDBDropdownItem link>174
<MDBIcon flag='fr' />175
Français176
</MDBDropdownItem>177
<MDBDropdownItem link>178
<MDBIcon flag='es' />179
Español180
</MDBDropdownItem>181
<MDBDropdownItem link>182
<MDBIcon flag='ru' />183
Русский184
</MDBDropdownItem>185
<MDBDropdownItem link>186
<MDBIcon flag='pt' />187
Português188
</MDBDropdownItem>189
</MDBDropdownMenu>190
</MDBDropdown>191
</MDBNavbarItem>192
193
<MDBNavbarItem style={{ cursor: 'pointer' }}>194
<MDBDropdown>195
<MDBDropdownToggle tag='a' className='hidden-arrow nav-link d-flex align-items-center'>196
<img197
src='https://mdbootstrap.com/img/new/avatars/2.jpg'198
className='rounded-circle'199
height='22'200
alt='Avatar'201
loading='lazy'202
/>203
</MDBDropdownToggle>204
<MDBDropdownMenu>205
<MDBDropdownItem link>My profile</MDBDropdownItem>206
<MDBDropdownItem link>Settings</MDBDropdownItem>207
<MDBDropdownItem link>Log out</MDBDropdownItem>208
</MDBDropdownMenu>209
</MDBDropdown>210
</MDBNavbarItem>211
</MDBNavbarNav>212
</MDBContainer>213
</MDBNavbar>214
<section className='text-center text-md-start'>215
<div216
className='p-5 bg-image'217
style={{218
height: '300px',219
backgroundImage: 'url("https://mdbootstrap.com/img/new/textures/full/66.jpg")',220
}}221
></div>222
223
<MDBCard224
className='mx-4 mx-md-5 shadow-5-strong'225
style={{ marginTop: '-100px', background: 'hsla(0, 0%, 100%, 0.7)', backdropFilter: 'blur(30px)' }}226
>227
<MDBCardBody className='px-5 px-md-5'>228
<MDBRow className='d-flex justify-content-center'>229
<MDBCol lg='10'>230
<MDBRow className='gx-lg-4 align-items-center'>231
<MDBCol lg='6' className='mb-4 mb-lg-0 text-center text-lg-start'>232
<h1>Dashboard</h1>233
<nav className='d-flex justify-content-center justify-content-lg-start'>234
<h6 className='mb-0'>235
<a href='' className='text-reset'>236
Home237
</a>238
<span>/</span>239
<a href='' className='text-reset'>240
Analytics241
</a>242
<span>/</span>243
<a href='' className='text-reset'>244
<u>Dashboard</u>245
</a>246
</h6>247
</nav>248
</MDBCol>249
<MDBCol lg='6' className='text-center text-lg-end'>250
<MDBBtn color='none' className='btn btn-link me-2' size='lg'>251
Customize252
</MDBBtn>253
<MDBBtn size='lg'>Print</MDBBtn>254
</MDBCol>255
</MDBRow>256
</MDBCol>257
</MDBRow>258
</MDBCardBody>259
</MDBCard>260
</section>261
</header>262
</MDBCol>263
</MDBRow>264
</MDBContainer>265
);266
}267
268
export default App;269
Console errors: 0