選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

437 行
15 KiB

  1. import React from "react";
  2. // @material-ui/core components
  3. import { makeStyles } from "@material-ui/core/styles";
  4. import List from "@material-ui/core/List";
  5. import ListItem from "@material-ui/core/ListItem";
  6. import Icon from "@material-ui/core/Icon";
  7. // @material-ui/icons
  8. import Search from "@material-ui/icons/Search";
  9. import Email from "@material-ui/icons/Email";
  10. import Face from "@material-ui/icons/Face";
  11. import AccountCircle from "@material-ui/icons/AccountCircle";
  12. import Explore from "@material-ui/icons/Explore";
  13. // core components
  14. import GridContainer from "components/Grid/GridContainer.js";
  15. import GridItem from "components/Grid/GridItem.js";
  16. import Header from "components/Header/Header.js";
  17. import CustomInput from "components/CustomInput/CustomInput.js";
  18. import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
  19. import Button from "components/CustomButtons/Button.js";
  20. import image from "assets/img/bg.jpg";
  21. import profileImage from "assets/img/faces/avatar.jpg";
  22. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/navbarsStyle.js";
  23. const useStyles = makeStyles(styles);
  24. export default function SectionNavbars() {
  25. const classes = useStyles();
  26. return (
  27. <div className={classes.section}>
  28. <div className={classes.container}>
  29. <GridContainer>
  30. <GridItem xs={12} sm={12} md={6}>
  31. <div className={classes.title}>
  32. <h3>Menu</h3>
  33. </div>
  34. <Header
  35. brand="Menu"
  36. color="primary"
  37. leftLinks={
  38. <List className={classes.list}>
  39. <ListItem className={classes.listItem}>
  40. <Button
  41. href="#pablo"
  42. className={classes.navLink}
  43. onClick={e => e.preventDefault()}
  44. color="transparent"
  45. >
  46. Link
  47. </Button>
  48. </ListItem>
  49. <ListItem className={classes.listItem}>
  50. <Button
  51. href="#pablo"
  52. className={classes.navLink}
  53. onClick={e => e.preventDefault()}
  54. color="transparent"
  55. >
  56. Link
  57. </Button>
  58. </ListItem>
  59. <ListItem className={classes.listItem}>
  60. <CustomDropdown
  61. navDropdown
  62. buttonText="Dropdown"
  63. dropdownHeader="Dropdown Header"
  64. buttonProps={{
  65. className: classes.navLink,
  66. color: "transparent"
  67. }}
  68. dropdownList={[
  69. "Action",
  70. "Another action",
  71. "Something else here",
  72. { divider: true },
  73. "Separated link",
  74. { divider: true },
  75. "One more separated link"
  76. ]}
  77. />
  78. </ListItem>
  79. </List>
  80. }
  81. />
  82. </GridItem>
  83. <GridItem xs={12} sm={12} md={6}>
  84. <div className={classes.title}>
  85. <h3>Menu with Icons</h3>
  86. </div>
  87. <Header
  88. brand="Icons"
  89. color="info"
  90. rightLinks={
  91. <List className={classes.list}>
  92. <ListItem className={classes.listItem}>
  93. <Button color="transparent" className={classes.navLink}>
  94. <Email className={classes.icons} />
  95. </Button>
  96. </ListItem>
  97. <ListItem className={classes.listItem}>
  98. <Button color="transparent" className={classes.navLink}>
  99. <Face className={classes.icons} />
  100. </Button>
  101. </ListItem>
  102. <ListItem className={classes.listItem}>
  103. <CustomDropdown
  104. left
  105. navDropdown
  106. hoverColor="info"
  107. dropdownHeader="Dropdown Header"
  108. buttonIcon="settings"
  109. buttonProps={{
  110. className: classes.navLink,
  111. color: "transparent"
  112. }}
  113. dropdownList={[
  114. "Action",
  115. "Another action",
  116. "Something else here",
  117. { divider: true },
  118. "Separated link",
  119. { divider: true },
  120. "One more separated link"
  121. ]}
  122. />
  123. </ListItem>
  124. </List>
  125. }
  126. />
  127. </GridItem>
  128. </GridContainer>
  129. <div className={classes.title}>
  130. <h3>Navigation</h3>
  131. </div>
  132. </div>
  133. <div id="navbar" className={classes.navbar}>
  134. <div
  135. className={classes.navigation}
  136. style={{ backgroundImage: "url(" + image + ")" }}
  137. >
  138. <Header
  139. brand="Brand"
  140. color="rose"
  141. leftLinks={
  142. <List className={classes.list}>
  143. <ListItem className={classes.listItem}>
  144. <Button
  145. href="#pablo"
  146. className={classes.navLink}
  147. onClick={e => e.preventDefault()}
  148. color="transparent"
  149. >
  150. Link
  151. </Button>
  152. </ListItem>
  153. <ListItem className={classes.listItem}>
  154. <Button
  155. href="#pablo"
  156. className={classes.navLink}
  157. onClick={e => e.preventDefault()}
  158. color="transparent"
  159. >
  160. Link
  161. </Button>
  162. </ListItem>
  163. </List>
  164. }
  165. rightLinks={
  166. <div>
  167. <CustomInput
  168. white
  169. inputRootCustomClasses={classes.inputRootCustomClasses}
  170. formControlProps={{
  171. className: classes.formControl
  172. }}
  173. inputProps={{
  174. placeholder: "Search",
  175. inputProps: {
  176. "aria-label": "Search",
  177. className: classes.searchInput
  178. }
  179. }}
  180. />
  181. <Button justIcon round color="white">
  182. <Search className={classes.searchIcon} />
  183. </Button>
  184. </div>
  185. }
  186. />
  187. <Header
  188. brand="Info Color"
  189. color="info"
  190. rightLinks={
  191. <List className={classes.list}>
  192. <ListItem className={classes.listItem}>
  193. <Button
  194. href="#pablo"
  195. className={classes.navLink + " " + classes.navLinkActive}
  196. onClick={e => e.preventDefault()}
  197. color="transparent"
  198. >
  199. Discover
  200. </Button>
  201. </ListItem>
  202. <ListItem className={classes.listItem}>
  203. <Button
  204. href="#pablo"
  205. className={classes.navLink}
  206. onClick={e => e.preventDefault()}
  207. color="transparent"
  208. >
  209. Profile
  210. </Button>
  211. </ListItem>
  212. <ListItem className={classes.listItem}>
  213. <Button
  214. href="#pablo"
  215. className={classes.navLink}
  216. onClick={e => e.preventDefault()}
  217. color="transparent"
  218. >
  219. Settings
  220. </Button>
  221. </ListItem>
  222. </List>
  223. }
  224. />
  225. <Header
  226. brand="Primary Color"
  227. color="primary"
  228. rightLinks={
  229. <List className={classes.list}>
  230. <ListItem className={classes.listItem}>
  231. <Button
  232. href="#pablo"
  233. className={classes.navLink + " " + classes.navLinkActive}
  234. onClick={e => e.preventDefault()}
  235. color="transparent"
  236. >
  237. <Explore className={classes.icons} /> Discover
  238. </Button>
  239. </ListItem>
  240. <ListItem className={classes.listItem}>
  241. <Button
  242. href="#pablo"
  243. className={classes.navLink}
  244. onClick={e => e.preventDefault()}
  245. color="transparent"
  246. >
  247. <AccountCircle className={classes.icons} /> Profile
  248. </Button>
  249. </ListItem>
  250. <ListItem className={classes.listItem}>
  251. <Button
  252. href="#pablo"
  253. className={classes.navLink}
  254. onClick={e => e.preventDefault()}
  255. color="transparent"
  256. >
  257. <Icon className={classes.icons}>settings</Icon> Settings
  258. </Button>
  259. </ListItem>
  260. </List>
  261. }
  262. />
  263. <Header
  264. brand="Navbar with notifications"
  265. color="dark"
  266. rightLinks={
  267. <List className={classes.list}>
  268. <ListItem className={classes.listItem}>
  269. <Button
  270. href="#pablo"
  271. className={classes.navLink}
  272. onClick={e => e.preventDefault()}
  273. color="transparent"
  274. >
  275. Discover
  276. </Button>
  277. </ListItem>
  278. <ListItem className={classes.listItem}>
  279. <Button
  280. href="#pablo"
  281. className={classes.navLink}
  282. onClick={e => e.preventDefault()}
  283. color="transparent"
  284. >
  285. Wishlist
  286. </Button>
  287. </ListItem>
  288. <ListItem className={classes.listItem}>
  289. <Button
  290. justIcon
  291. round
  292. href="#pablo"
  293. className={classes.notificationNavLink}
  294. onClick={e => e.preventDefault()}
  295. color="rose"
  296. >
  297. <Email className={classes.icons} />
  298. </Button>
  299. </ListItem>
  300. <ListItem className={classes.listItem}>
  301. <CustomDropdown
  302. left
  303. caret={false}
  304. hoverColor="black"
  305. dropdownHeader="Dropdown Header"
  306. buttonText={
  307. <img
  308. src={profileImage}
  309. className={classes.img}
  310. alt="profile"
  311. />
  312. }
  313. buttonProps={{
  314. className:
  315. classes.navLink + " " + classes.imageDropdownButton,
  316. color: "transparent"
  317. }}
  318. dropdownList={[
  319. "Me",
  320. "Settings and other stuff",
  321. "Sign out"
  322. ]}
  323. />
  324. </ListItem>
  325. </List>
  326. }
  327. />
  328. <Header
  329. brand="Navbar with profile"
  330. rightLinks={
  331. <List className={classes.list}>
  332. <ListItem className={classes.listItem}>
  333. <Button
  334. href="#pablo"
  335. className={classes.navLink}
  336. onClick={e => e.preventDefault()}
  337. color="transparent"
  338. >
  339. Discover
  340. </Button>
  341. </ListItem>
  342. <ListItem className={classes.listItem}>
  343. <Button
  344. href="#pablo"
  345. className={classes.navLink}
  346. onClick={e => e.preventDefault()}
  347. color="transparent"
  348. >
  349. Wishlist
  350. </Button>
  351. </ListItem>
  352. <ListItem className={classes.listItem}>
  353. <Button
  354. href="#pablo"
  355. className={classes.registerNavLink}
  356. onClick={e => e.preventDefault()}
  357. color="rose"
  358. round
  359. >
  360. Register
  361. </Button>
  362. </ListItem>
  363. </List>
  364. }
  365. />
  366. <Header
  367. brand="Transparent"
  368. color="transparent"
  369. rightLinks={
  370. <List className={classes.list}>
  371. <ListItem className={classes.listItem}>
  372. <Button
  373. color="transparent"
  374. className={
  375. classes.navLink + " " + classes.socialIconsButton
  376. }
  377. >
  378. <i
  379. className={
  380. classes.socialIcons +
  381. " " +
  382. classes.marginRight5 +
  383. " fab fa-twitter"
  384. }
  385. />{" "}
  386. Twitter
  387. </Button>
  388. </ListItem>
  389. <ListItem className={classes.listItem}>
  390. <Button
  391. color="transparent"
  392. className={
  393. classes.navLink + " " + classes.socialIconsButton
  394. }
  395. >
  396. <i
  397. className={
  398. classes.socialIcons +
  399. " " +
  400. classes.marginRight5 +
  401. " fab fa-facebook"
  402. }
  403. />{" "}
  404. Facebook
  405. </Button>
  406. </ListItem>
  407. <ListItem className={classes.listItem}>
  408. <Button
  409. color="transparent"
  410. className={
  411. classes.navLink + " " + classes.socialIconsButton
  412. }
  413. >
  414. <i
  415. className={
  416. classes.socialIcons +
  417. " " +
  418. classes.marginRight5 +
  419. " fab fa-instagram"
  420. }
  421. />{" "}
  422. Instagram
  423. </Button>
  424. </ListItem>
  425. </List>
  426. }
  427. />
  428. </div>
  429. </div>
  430. </div>
  431. );
  432. }