xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
4
<head>5
<meta charset="utf-8">6
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">7
<meta name="theme-color" content="#000000">8
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">9
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">10
<title>React App</title>11
</head>12
13
<body>14
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" />15
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css" />16
<noscript>You need to enable JavaScript to run this app.</noscript>17
<div id="root"></div>18
</body>19
20
</html>21
1
1
xxxxxxxxxx1
import React, { Fragment, useEffect, useState } from 'react'2
import { MDBInput, MDBNavbar, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon, MDBSideNavItem, MDBSideNavCat, MDBSideNavNav, MDBSideNav, MDBContainer } from "mdbreact";3
4
5
6
const App = () => {7
8
useEffect(() => {9
handleResize();10
window.addEventListener("resize",handleResize);11
return () => {12
window.removeEventListener("resize",handleResize);13
}14
}, [])15
16
const [toggleStateA,setToggleStateA]=useState(false);17
const [breakWidth,setBreakWidth]=useState(1300);18
const [windowWidth,setWindowWidth]=useState(0); 19
20
const navStyle = {21
paddingLeft:22
windowWidth > breakWidth ? "180px" : "16px"23
};24
25
const mainStyle = {26
margin: "0 0.2%",27
paddingTop: "5.5rem",28
paddingLeft:29
windowWidth > breakWidth ? "240px" : "0"30
};31
32
const specialCaseNavbarStyles = {33
WebkitBoxOrient: "horizontal",34
flexDirection: "row"35
36
};37
38
const handleResize =() =>39
{40
setWindowWidth(window.innerWidth)41
}42
43
const handleToggleClickA = () => {44
setToggleStateA(!toggleStateA);45
};46
return (47
48
<div className="fixed-sn light-blue-skin ">49
<MDBSideNav 50
triggerOpening={toggleStateA}51
breakWidth={breakWidth}52
className="morpheus-den-gradient"53
fixed54
>55
<Image src='https://scontent.fath5-1.fna.fbcdn.net/v/t1.0-9/49237426_10157016438751494_7482052785928667136_o.jpg?_nc_cat=110&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeFbZeUgR5ykWJXPRk10_PXsm7VWXTNYLZybtVZdM1gtnK6EkPAu3cr1XPh6YjIaBkk&_nc_ohc=PgcF8NJ2vmkAX-ZgPTP&_nc_ht=scontent.fath5-1.fna&oh=b4df57159b9d1b2413f906abebbe25c3&oe=5FD489AF'56
size='small' circular centered style={{marginTop:'2em'}} />57
<li>58
<ul className="social" >59
<li>60
<a href="#!">61
<MDBIcon fab icon="facebook-f" />62
</a>63
</li>64
<li>65
<a href="#!">66
<MDBIcon fab icon="pinterest" />67
</a>68
</li>69
<li>70
<a href="#!">71
<MDBIcon fab icon="google-plus-g" />72
</a>73
</li>74
<li>75
<a href="#!">76
<MDBIcon fab icon="twitter" />77
</a>78
</li>79
</ul>80
</li>81
82
<MDBSideNavNav >83
<MDBSideNavCat 84
name="Submit blog"85
id="submit-blog-cat"86
icon="chevron-right"87
>88
<MDBSideNavItem>Submit listing</MDBSideNavItem>89
<MDBSideNavItem>Registration form</MDBSideNavItem>90
</MDBSideNavCat>91
<MDBSideNavCat92
iconRegular93
name="Instruction"94
id="instruction-cat"95
icon="hand-pointer"96
>97
<MDBSideNavItem>For bloggers</MDBSideNavItem>98
<MDBSideNavItem>For authors</MDBSideNavItem>99
</MDBSideNavCat>100
<MDBSideNavCat name="About" id="about-cat" icon="eye">101
<MDBSideNavItem>Instruction</MDBSideNavItem>102
<MDBSideNavItem>Monthly meetings</MDBSideNavItem>103
</MDBSideNavCat>104
<MDBSideNavCat105
106
name="Contact me"107
id="contact-me-cat"108
icon="envelope"109
>110
<MDBSideNavItem>FAQ</MDBSideNavItem>111
<MDBSideNavItem>Write a message</MDBSideNavItem>112
</MDBSideNavCat>113
</MDBSideNavNav>114
</MDBSideNav>115
<MDBNavbar style={navStyle} double expand="md" fixed="top" scrolling className='nav'>116
<MDBNavbarNav left>117
<MDBNavItem>118
<div119
onClick={handleToggleClickA}120
key="sideNavToggleA"121
style={{122
lineHeight: "32px",123
marginRight: "1em",124
verticalAlign: "middle"125
}}126
>127
<MDBIcon icon="bars" color="white" size="2x" />128
</div>129
</MDBNavItem>130
<MDBNavItem className="d-none d-md-inline" style={{ paddingTop: 5 }}>131
Material Design for Bootstrap132
</MDBNavItem>133
</MDBNavbarNav>134
<MDBNavbarNav right style={specialCaseNavbarStyles} >135
<MDBNavItem active>136
<MDBNavLink to="#!">137
<MDBIcon icon="envelope" className="d-inline-inline" />{" "}138
<div className="d-none d-md-inline">Contact</div>139
</MDBNavLink>140
</MDBNavItem>141
<MDBNavItem>142
<MDBNavLink to="#!">143
<MDBIcon far icon="comments" className="d-inline-inline" />{" "}144
<div className="d-none d-md-inline">Support</div>145
</MDBNavLink>146
</MDBNavItem>147
<MDBNavItem>148
<MDBNavLink to="#!">149
<MDBIcon icon="user" className="d-inline-inline" />{" "}150
<div className="d-none d-md-inline">Account</div>151
</MDBNavLink>152
</MDBNavItem>153
<MDBNavItem>154
<MDBDropdown>155
<MDBDropdownToggle nav caret>156
<div className="d-none d-md-inline">Dropdown</div>157
</MDBDropdownToggle>158
<MDBDropdownMenu right>159
<MDBDropdownItem href="#!">Action</MDBDropdownItem>160
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>161
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>162
<MDBDropdownItem href="#!">Something else here</MDBDropdownItem>163
</MDBDropdownMenu>164
</MDBDropdown>165
</MDBNavItem>166
</MDBNavbarNav>167
</MDBNavbar>168
<main style={mainStyle}>169
<MDBContainer fluid style={{ height: 2000 }} className="mt-5">170
<App/>171
172
</MDBContainer>173
</main>174
</div>175
176
177
178
)179
}180
181
export default App182
Console errors: 0