Skip to content

S
Saddlemountain Page
Commit 3c0b5099 authored by VeroSilva's avatar VeroSilva
Browse files
Options

Component Navbar

parent 3c8b3f84
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 37 deletions
package-lock.json
View file @ 3c0b5099
...@@ -1921,13 +1921,13 @@ ...@@ -1921,13 +1921,13 @@
} }
}, },
"@mui/base": { "@mui/base": {
"version": "5.0.0-alpha.55", "version": "5.0.0-alpha.56",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.55.tgz", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.56.tgz",
"integrity": "sha512-caPa04xwZF5Gv7qkto32xRBwubNgkjbXQngqp8PN10DQ/XcLtoe4PqrSPjwWBH0iNUZSRDf2HPP71tIU7bdR7Q==", "integrity": "sha512-BlPuRx778JoNIF34m8wOPDZSburwFbH+Y1y97KoAEqC2Qra2UGV3+vII3R9+qkikIKEWJvv1327J7sCfxfpGFQ==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@emotion/is-prop-valid": "^1.1.1", "@emotion/is-prop-valid": "^1.1.1",
"@mui/utils": "^5.1.1", "@mui/utils": "^5.2.0",
"@popperjs/core": "^2.4.4", "@popperjs/core": "^2.4.4",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
...@@ -1944,19 +1944,37 @@ ...@@ -1944,19 +1944,37 @@
} }
} }
}, },
"@mui/icons-material": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.2.0.tgz",
"integrity": "sha512-NvyrVaGKpP4R1yFw8BCnE0QcsQ67RtpgxPr4FtH8q60MDYPuPVczLOn5Ash5CFavoDWur/NfM/4DpT54yf3InA==",
"requires": {
"@babel/runtime": "^7.16.3"
},
"dependencies": {
"@babel/runtime": {
"version": "7.16.3",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
"integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
}
}
},
"@mui/material": { "@mui/material": {
"version": "5.1.1", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.0.tgz",
"integrity": "sha512-3mhuKlWnTa1r5cJ8mV66NXXmOB6Ck564oq4X8Ai0CeHqj0f6xCBHOgWXQtX6Cc8Yhf81MJkaN92AECVUpUHqLQ==", "integrity": "sha512-AJehUbf0pWA+X9x+rXM4xHjLdNSf3YZzVt9YP/Pa75HCIDn4Dg2neiZu/Cg57C19WMlUf3nyn4Vkz4nD48DgPA==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@mui/base": "5.0.0-alpha.55", "@mui/base": "5.0.0-alpha.56",
"@mui/system": "^5.1.1", "@mui/system": "^5.2.0",
"@mui/types": "^7.1.0", "@mui/types": "^7.1.0",
"@mui/utils": "^5.1.1", "@mui/utils": "^5.2.0",
"@types/react-transition-group": "^4.4.4", "@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"csstype": "^3.0.9", "csstype": "^3.0.10",
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react-is": "^17.0.2", "react-is": "^17.0.2",
...@@ -1979,12 +1997,12 @@ ...@@ -1979,12 +1997,12 @@
} }
}, },
"@mui/private-theming": { "@mui/private-theming": {
"version": "5.1.1", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.2.0.tgz",
"integrity": "sha512-h+MGzBVSH7GgXou4aIraJhakygTYIWvvxvTm81Y6RmwRcrzv8szDQeRDiM7iOVjqsS33dXfMkTi7csRCgeErsg==", "integrity": "sha512-ABdL+X/AR5CJdjPIwMcYaXrC+kLeHC7q83PiSfBHwOv6SPhGWWHL5MphibQMNuEcuG4rdUZrJLTT/L22oxdldg==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@mui/utils": "^5.1.1", "@mui/utils": "^5.2.0",
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
}, },
"dependencies": { "dependencies": {
...@@ -1999,9 +2017,9 @@ ...@@ -1999,9 +2017,9 @@
} }
}, },
"@mui/styled-engine": { "@mui/styled-engine": {
"version": "5.1.1", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.0.tgz",
"integrity": "sha512-vThhmTezPjBcn6CEeVuFqB3wgANnxHgYXn0wsr+OIgevkgSHeRfVn6mpSa66oTFGb+paPtH4ASqeUvL5Sscg4w==", "integrity": "sha512-NZ4pWYQcM5wreUfiXRd7IMFRF+Nq1vMzsIdXtXNjgctJTKHunrofasoBqv+cqevO+hqT75ezSbNHyaXzOXp6Mg==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@emotion/cache": "^11.6.0", "@emotion/cache": "^11.6.0",
...@@ -2027,17 +2045,17 @@ ...@@ -2027,17 +2045,17 @@
} }
}, },
"@mui/system": { "@mui/system": {
"version": "5.1.1", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.0.tgz",
"integrity": "sha512-RWaM/7wAvSOX39r13in3KrLXWsd0cSkk1P/MOCW2eVY13MJIAuDUl5ZoF1uos9kWWJJge+lE77XWmYqXYrxPLw==", "integrity": "sha512-l5nbNuT5WP0d/qmQwSzGn5JztEpclYWNrfS0JokupP/MtlmqSPoLs3KiXxyuKJxwfHOCY4rdxHTb6kJxDxL1Ew==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@mui/private-theming": "^5.1.1", "@mui/private-theming": "^5.2.0",
"@mui/styled-engine": "^5.1.1", "@mui/styled-engine": "^5.2.0",
"@mui/types": "^7.1.0", "@mui/types": "^7.1.0",
"@mui/utils": "^5.1.1", "@mui/utils": "^5.2.0",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"csstype": "^3.0.9", "csstype": "^3.0.10",
"prop-types": "^15.7.2" "prop-types": "^15.7.2"
}, },
"dependencies": { "dependencies": {
...@@ -2062,9 +2080,9 @@ ...@@ -2062,9 +2080,9 @@
"integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==" "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ=="
}, },
"@mui/utils": { "@mui/utils": {
"version": "5.1.1", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.1.1.tgz", "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.2.0.tgz",
"integrity": "sha512-rqakHf0IMaasDo1EcYqkx13VTxeoQoGf/3RxQuazQFKzF7d2uylFwNyb6bnUJGNe2/akiIMk/qiub58sYrwxVQ==", "integrity": "sha512-RiaRY0Qyr8IzgUK0+SuCxugG2wlPYkZ7JQPGmaFdRX2EUbudFiUPgzFAEp+VvJIGkdbxFq8t/t3Sy9WO7DbMEA==",
"requires": { "requires": {
"@babel/runtime": "^7.16.3", "@babel/runtime": "^7.16.3",
"@types/prop-types": "^15.7.4", "@types/prop-types": "^15.7.4",
......
src/components/Drawer.jsx 0 → 100644
View file @ 3c0b5099
import React, { useState } from "react";
import {
Drawer,
IconButton,
List,
ListItem,
ListItemText,
} from "@material-ui/core";
import ListItemIcon from '@mui/material/ListItemIcon';
import Divider from '@mui/material/Divider';
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
import InventoryRoundedIcon from '@mui/icons-material/InventoryRounded';
import PeopleOutlineRoundedIcon from '@mui/icons-material/PeopleOutlineRounded';
import LocalMallRoundedIcon from '@mui/icons-material/LocalMallRounded';
import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
import { NavLink } from "./styled";
function DrawerComponent() {
const [openDrawer, setOpenDrawer] = useState(false);
const [selectedIndex, setSelectedIndex] = useState(1);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
return (
<>
<Drawer open={openDrawer} onClose={() => setOpenDrawer(false)}>
<List>
<ListItem
selected={selectedIndex === 0}
onClick={(event) => {
handleListItemClick(event, 0)
setOpenDrawer(false)
}}
>
<ListItemIcon>
<InventoryRoundedIcon />
</ListItemIcon>
<ListItemText>
<NavLink href="#">Productos</NavLink>
</ListItemText>
</ListItem>
<ListItem
selected={selectedIndex === 1}
onClick={(event) => {
handleListItemClick(event, 1)
setOpenDrawer(false)
}}
>
<ListItemIcon>
<PeopleOutlineRoundedIcon />
</ListItemIcon>
<ListItemText>
<NavLink href="#">Quiénes somos</NavLink>
</ListItemText>
</ListItem>
<ListItem
selected={selectedIndex === 2}
onClick={(event) => {
handleListItemClick(event, 2)
setOpenDrawer(false)
}}
>
<ListItemIcon>
<LocalMallRoundedIcon />
</ListItemIcon>
<ListItemText>
<NavLink href="#">Clientes</NavLink>
</ListItemText>
</ListItem>
<ListItem
selected={selectedIndex === 3}
onClick={(event) => {
handleListItemClick(event, 3)
setOpenDrawer(false)
}}
>
<ListItemIcon>
<ArticleRoundedIcon />
</ListItemIcon>
<ListItemText>
<NavLink href="#">Blog</NavLink>
</ListItemText>
</ListItem>
</List>
<Divider />
</Drawer>
<IconButton onClick={() => setOpenDrawer(!openDrawer)}>
<MenuRoundedIcon sx={{ color: "#ffffff" }} fontSize="large" />
</IconButton>
</>
);
};
export default DrawerComponent;
src/components/Navbar.jsx
View file @ 3c0b5099
...@@ -5,8 +5,14 @@ import Toolbar from "@mui/material/Toolbar"; ...@@ -5,8 +5,14 @@ import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import useScrollTrigger from "@mui/material/useScrollTrigger"; import useScrollTrigger from "@mui/material/useScrollTrigger";
import Slide from "@mui/material/Slide"; import Slide from "@mui/material/Slide";
import {
useTheme,
useMediaQuery,
} from "@material-ui/core";
import Drawer from "./Drawer";
import { NavLink } from "./styled"; import { NavLink } from "./styled";
import { color } from "@mui/system";
function HideOnScroll(props) { function HideOnScroll(props) {
const { children, window } = props; const { children, window } = props;
...@@ -26,10 +32,23 @@ HideOnScroll.propTypes = { ...@@ -26,10 +32,23 @@ HideOnScroll.propTypes = {
window: PropTypes.func, window: PropTypes.func,
}; };
export default function Navbar(props) { function Navbar(props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
return ( return (
<HideOnScroll {...props}> <HideOnScroll {...props}>
<AppBar sx={{ background: "#074B6B", px: 5 }}> <AppBar
sx={{
backgroundColor: "#074B6B !important",
px: {
lg: 8,
},
color: {
md: "#ffffff !important",
sm: "#404040 !important"
}
}}>
<Toolbar> <Toolbar>
<Typography <Typography
variant="h6" variant="h6"
...@@ -38,13 +57,21 @@ export default function Navbar(props) { ...@@ -38,13 +57,21 @@ export default function Navbar(props) {
> >
Logo Logo
</Typography> </Typography>
<NavLink href="#" edge="end" >Productos</NavLink> {isMobile ? (
<NavLink href="#">Quiénes somos</NavLink> <Drawer />
<NavLink href="#">Blog</NavLink> ) : (
<NavLink href="#">Clientes</NavLink> <>
<NavLink href="#">Contáctanos</NavLink> <NavLink href="#" edge="end" >Productos</NavLink>
<NavLink href="#">Quiénes somos</NavLink>
<NavLink href="#">Blog</NavLink>
<NavLink href="#">Clientes</NavLink>
<NavLink href="#">Contáctanos</NavLink>
</>
)}
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</HideOnScroll> </HideOnScroll>
); );
} };
export default Navbar;
src/components/styled.js
View file @ 3c0b5099
...@@ -10,4 +10,12 @@ export const NavLink = styled.a` ...@@ -10,4 +10,12 @@ export const NavLink = styled.a`
border-bottom: 2px solid #42C3D8; border-bottom: 2px solid #42C3D8;
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 959px) {
margin-left: 0px;
margin-right: 5px;
&:hover {
border-bottom: none;
}
}
`; `;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment