|
| 1 | +import { AppBar, Toolbar, Grid, Button, Typography } from "@mui/material"; |
| 2 | +import { Colors } from "design/theme"; |
| 3 | +import useIsLargeScreen from "hooks/useIsLargeScreen"; |
| 4 | +import React from "react"; |
| 5 | +import { useNavigate, Link } from "react-router-dom"; |
| 6 | +import RoutesEnum from "types/routes.enum"; |
| 7 | + |
| 8 | +interface LandingNavBarProps { |
| 9 | + scrolled: boolean; |
| 10 | +} |
| 11 | + |
| 12 | +const LandingNavBar: React.FC<LandingNavBarProps> = ({ scrolled }) => { |
| 13 | + const isLargeScreen = useIsLargeScreen(); |
| 14 | + const justifyContentValue = isLargeScreen ? "flex-start" : "space-between"; |
| 15 | + |
| 16 | + const navigate = useNavigate(); |
| 17 | + |
| 18 | + return ( |
| 19 | + <AppBar |
| 20 | + position="fixed" |
| 21 | + sx={{ |
| 22 | + maxWidth: "100vw", |
| 23 | + width: "100%", |
| 24 | + overflowX: "hidden", |
| 25 | + backgroundColor: scrolled ? "rgba(97, 109, 243, 0.1)" : "transparent", |
| 26 | + backgroundImage: scrolled |
| 27 | + ? "none" |
| 28 | + : `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%232c3379'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(400 0)'%3E%3Cg %3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-273.6 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.79' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`, |
| 29 | + |
| 30 | + backgroundAttachment: "fixed", |
| 31 | + backgroundSize: "cover", |
| 32 | + transition: |
| 33 | + "background-color 0.5s ease-in-out, background-image 0.5s ease-in-out", |
| 34 | + backdropFilter: "blur(50px)", |
| 35 | + boxShadow: scrolled ? "0px 8px 10px rgba(0, 0, 0, 0.2)" : "none", |
| 36 | + minHeight: "6rem", |
| 37 | + }} |
| 38 | + > |
| 39 | + <Toolbar sx={{ marginTop: "0.5rem" }}> |
| 40 | + <Grid |
| 41 | + container |
| 42 | + alignItems="center" |
| 43 | + justifyContent={justifyContentValue} |
| 44 | + sx={{ maxWidth: "100%" }} |
| 45 | + > |
| 46 | + <Grid item sm={12} md={5} lg={5}> |
| 47 | + <Button |
| 48 | + sx={{ |
| 49 | + display: "flex", |
| 50 | + alignItems: "center", |
| 51 | + justifyContent: "center", |
| 52 | + flexDirection: "column", |
| 53 | + }} |
| 54 | + onClick={() => navigate("/")} |
| 55 | + > |
| 56 | + <Typography |
| 57 | + variant="h1" |
| 58 | + sx={{ |
| 59 | + color: Colors.yellow, |
| 60 | + }} |
| 61 | + > |
| 62 | + NeuroJSON.io |
| 63 | + </Typography> |
| 64 | + <Typography |
| 65 | + variant="h2" |
| 66 | + sx={{ |
| 67 | + color: Colors.lightGray, |
| 68 | + }} |
| 69 | + > |
| 70 | + Free Data Worth Sharing |
| 71 | + </Typography> |
| 72 | + </Button> |
| 73 | + </Grid> |
| 74 | + {/* Navigation links*/} |
| 75 | + <Grid item paddingLeft="2rem"> |
| 76 | + <Grid container spacing={3} justifyContent="center"> |
| 77 | + {[ |
| 78 | + { text: "ABOUT", url: "https://neurojson.org/Doc/Start" }, |
| 79 | + { text: "WIKI", url: "https://neurojson.org/Wiki" }, |
| 80 | + { text: "SEARCH", url: null }, |
| 81 | + ].map(({ text, url }) => ( |
| 82 | + <Grid item key={text}> |
| 83 | + {url ? ( |
| 84 | + <a |
| 85 | + href={url} |
| 86 | + target="_blank" |
| 87 | + rel="noopener noreferrer" |
| 88 | + style={{ textDecoration: "none" }} |
| 89 | + > |
| 90 | + <Typography |
| 91 | + align="center" |
| 92 | + fontWeight={600} |
| 93 | + lineHeight={"1.5rem"} |
| 94 | + letterSpacing={"0.05rem"} |
| 95 | + sx={{ |
| 96 | + color: Colors.white, |
| 97 | + transition: "color 0.3s ease, transform 0.3s ease", |
| 98 | + "&:hover": { |
| 99 | + color: Colors.green, |
| 100 | + transform: "scale(1.05)", |
| 101 | + cursor: "pointer", |
| 102 | + boxShadow: `0px 0px 15px ${Colors.green}`, |
| 103 | + borderRadius: "5px", |
| 104 | + padding: "5px", |
| 105 | + }, |
| 106 | + }} |
| 107 | + > |
| 108 | + {text} |
| 109 | + </Typography> |
| 110 | + </a> |
| 111 | + ) : ( |
| 112 | + <Link |
| 113 | + to={RoutesEnum.SEARCH} |
| 114 | + style={{ textDecoration: "none" }} |
| 115 | + > |
| 116 | + <Typography |
| 117 | + align="center" |
| 118 | + fontWeight={600} |
| 119 | + lineHeight={"1.5rem"} |
| 120 | + letterSpacing={"0.05rem"} |
| 121 | + sx={{ |
| 122 | + color: Colors.white, |
| 123 | + transition: "color 0.3s ease, transform 0.3s ease", |
| 124 | + "&:hover": { |
| 125 | + color: Colors.green, |
| 126 | + transform: "scale(1.05)", |
| 127 | + cursor: "pointer", |
| 128 | + boxShadow: `0px 0px 15px ${Colors.green}`, |
| 129 | + borderRadius: "5px", |
| 130 | + padding: "5px", |
| 131 | + }, |
| 132 | + }} |
| 133 | + > |
| 134 | + {text} |
| 135 | + </Typography> |
| 136 | + </Link> |
| 137 | + )} |
| 138 | + </Grid> |
| 139 | + ))} |
| 140 | + </Grid> |
| 141 | + </Grid> |
| 142 | + </Grid> |
| 143 | + </Toolbar> |
| 144 | + </AppBar> |
| 145 | + ); |
| 146 | +}; |
| 147 | + |
| 148 | +export default LandingNavBar; |
0 commit comments