|
1 | | -import { AppBar, Toolbar, Grid, Button, Typography } from "@mui/material"; |
2 | | -import { Colors } from "design/theme"; |
3 | | -import useIsLargeScreen from "hooks/useIsLargeScreen"; |
| 1 | +import NavItems from "./NavItems"; |
| 2 | +import { AppBar } from "@mui/material"; |
4 | 3 | import React from "react"; |
5 | | -import { useNavigate, Link } from "react-router-dom"; |
6 | | -import RoutesEnum from "types/routes.enum"; |
7 | 4 |
|
8 | 5 | const DefaultNavBar: React.FC = () => { |
9 | | - const isLargeScreen = useIsLargeScreen(); |
10 | | - const justifyContentValue = isLargeScreen ? "flex-start" : "space-between"; |
11 | | - |
12 | | - const navigate = useNavigate(); |
13 | | - |
14 | 6 | return ( |
15 | 7 | <AppBar |
16 | 8 | position="fixed" |
17 | 9 | sx={{ |
18 | 10 | maxWidth: "100vw", |
19 | 11 | width: "100%", |
20 | 12 | overflowX: "hidden", |
21 | | - // backgroundColor: scrolled ? "rgba(97, 109, 243, 0.1)" : "transparent", |
22 | 13 | backgroundImage: `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")`, |
23 | 14 | backgroundAttachment: "fixed", |
24 | 15 | backgroundSize: "cover", |
25 | | - // transition: |
26 | | - // "background-color 0.5s ease-in-out, background-image 0.5s ease-in-out", |
27 | | - // backdropFilter: "blur(50px)", |
28 | 16 | boxShadow: "none", |
29 | 17 | minHeight: "6rem", |
| 18 | + transition: |
| 19 | + "background-color 0.5s ease-in-out, background-image 0.5s ease-in-out", |
30 | 20 | }} |
31 | 21 | > |
32 | | - <Toolbar sx={{ marginTop: "0.5rem" }}> |
33 | | - <Grid |
34 | | - container |
35 | | - alignItems="center" |
36 | | - justifyContent={justifyContentValue} |
37 | | - sx={{ maxWidth: "100%" }} |
38 | | - > |
39 | | - <Grid item sm={12} md={5} lg={5}> |
40 | | - <Button |
41 | | - sx={{ |
42 | | - display: "flex", |
43 | | - alignItems: "center", |
44 | | - justifyContent: "center", |
45 | | - flexDirection: "column", |
46 | | - }} |
47 | | - onClick={() => navigate("/")} |
48 | | - > |
49 | | - <Typography |
50 | | - variant="h1" |
51 | | - sx={{ |
52 | | - color: Colors.yellow, |
53 | | - }} |
54 | | - > |
55 | | - NeuroJSON.io |
56 | | - </Typography> |
57 | | - <Typography |
58 | | - variant="h2" |
59 | | - sx={{ |
60 | | - color: Colors.lightGray, |
61 | | - }} |
62 | | - > |
63 | | - Free Data Worth Sharing |
64 | | - </Typography> |
65 | | - </Button> |
66 | | - </Grid> |
67 | | - {/* Navigation links*/} |
68 | | - <Grid item paddingLeft="2rem"> |
69 | | - <Grid container spacing={3} justifyContent="center"> |
70 | | - {[ |
71 | | - { text: "ABOUT", url: "https://neurojson.org/Doc/Start" }, |
72 | | - { text: "WIKI", url: "https://neurojson.org/Wiki" }, |
73 | | - { text: "SEARCH", url: null }, |
74 | | - ].map(({ text, url }) => ( |
75 | | - <Grid item key={text}> |
76 | | - {url ? ( |
77 | | - <a |
78 | | - href={url} |
79 | | - target="_blank" |
80 | | - rel="noopener noreferrer" |
81 | | - style={{ textDecoration: "none" }} |
82 | | - > |
83 | | - <Typography |
84 | | - align="center" |
85 | | - fontWeight={600} |
86 | | - lineHeight={"1.5rem"} |
87 | | - letterSpacing={"0.05rem"} |
88 | | - sx={{ |
89 | | - color: Colors.white, |
90 | | - transition: "color 0.3s ease, transform 0.3s ease", |
91 | | - "&:hover": { |
92 | | - color: Colors.green, |
93 | | - transform: "scale(1.05)", |
94 | | - cursor: "pointer", |
95 | | - boxShadow: `0px 0px 15px ${Colors.green}`, |
96 | | - borderRadius: "5px", |
97 | | - padding: "5px", |
98 | | - }, |
99 | | - }} |
100 | | - > |
101 | | - {text} |
102 | | - </Typography> |
103 | | - </a> |
104 | | - ) : ( |
105 | | - <Link |
106 | | - to={RoutesEnum.SEARCH} |
107 | | - style={{ textDecoration: "none" }} |
108 | | - > |
109 | | - <Typography |
110 | | - align="center" |
111 | | - fontWeight={600} |
112 | | - lineHeight={"1.5rem"} |
113 | | - letterSpacing={"0.05rem"} |
114 | | - sx={{ |
115 | | - color: Colors.white, |
116 | | - transition: "color 0.3s ease, transform 0.3s ease", |
117 | | - "&:hover": { |
118 | | - color: Colors.green, |
119 | | - transform: "scale(1.05)", |
120 | | - cursor: "pointer", |
121 | | - boxShadow: `0px 0px 15px ${Colors.green}`, |
122 | | - borderRadius: "5px", |
123 | | - padding: "5px", |
124 | | - }, |
125 | | - }} |
126 | | - > |
127 | | - {text} |
128 | | - </Typography> |
129 | | - </Link> |
130 | | - )} |
131 | | - </Grid> |
132 | | - ))} |
133 | | - </Grid> |
134 | | - </Grid> |
135 | | - </Grid> |
136 | | - </Toolbar> |
| 22 | + <NavItems /> |
137 | 23 | </AppBar> |
138 | 24 | ); |
139 | 25 | }; |
|
0 commit comments