Skip to content

Commit

Permalink
added bottom nav bar
Browse files Browse the repository at this point in the history
  • Loading branch information
ahnafnafee committed Mar 1, 2022
1 parent a62e051 commit 4a8c5ef
Show file tree
Hide file tree
Showing 19 changed files with 7,458 additions and 2,609 deletions.
22 changes: 0 additions & 22 deletions components/BottomNav.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,6 @@ import {
const BottomNav = (props) => {
const router = useRouter();
const [activeTabs, setActiveTabs] = useState(props.name);
// useEffect(() => {
// switch (activeTabs) {
// case "library":
// // router.push("/authenticate");
// console.log("library");
// // router.push("/");
// break;
// case "search":
// // router.push("/");
// console.log("search");
// // router.push("/authenticate");
// break;
// case "wishlist":
// console.log("wishlist");
// // router.push("/authenticate");
// break;
// default:
// console.log("default");
// // router.push("/");
// break;
// }
// }, [activeTabs, router]);

return (
<div className={`${styles.bottomNav}`}>
Expand Down
6 changes: 5 additions & 1 deletion components/BottomNav.module.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.bottomNav {
width: 100%;
height: 7%;
position: fixed;
position: absolute;
bottom: 0;
padding-top: 8px;
/* border-top: 1px solid #000; */
Expand All @@ -21,3 +21,7 @@
justify-content: center;
align-items: center;
}

.shadow {
box-shadow: 0 4px 14px 0 rgb(0 118 255 / 39%);
}
Empty file added components/Button.module.css
Empty file.
118 changes: 23 additions & 95 deletions components/Link.js
Original file line number Diff line number Diff line change
@@ -1,99 +1,27 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink from 'next/link';
import MuiLink from '@mui/material/Link';
import { styled } from '@mui/material/styles';
import NextLink from "next/link";
import { useRouter } from "next/router";

// Add support for the sx prop for consistency with the other branches.
const Anchor = styled('a')({});

export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
const { to, linkAs, href, replace, scroll, shallow, prefetch, locale, ...other } = props;

return (
<NextLink
href={to}
prefetch={prefetch}
as={linkAs}
replace={replace}
scroll={scroll}
shallow={shallow}
passHref
locale={locale}
>
<Anchor ref={ref} {...other} />
</NextLink>
);
});

NextLinkComposed.propTypes = {
href: PropTypes.any,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
locale: PropTypes.string,
passHref: PropTypes.bool,
prefetch: PropTypes.bool,
replace: PropTypes.bool,
scroll: PropTypes.bool,
shallow: PropTypes.bool,
to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
};

// A styled version of the Next.js Link component:
// https://nextjs.org/docs/api-reference/next/link
const Link = React.forwardRef(function Link(props, ref) {
const {
activeClassName = 'active',
as: linkAs,
className: classNameProps,
export function Link({
href,
noLinkStyle,
role, // Link don't have roles.
...other
} = props;

const router = useRouter();
const pathname = typeof href === 'string' ? href : href.pathname;
const className = clsx(classNameProps, {
[activeClassName]: router.pathname === pathname && activeClassName,
});

const isExternal =
typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0);

if (isExternal) {
if (noLinkStyle) {
return <Anchor className={className} href={href} ref={ref} {...other} />;
activeClassName,
inactiveClassName,
className,
children,
...rest
}) {
const router = useRouter();

let currentClassName = className;
let isActive = router.pathname === href;
if (isActive) {
currentClassName += ` ${activeClassName}`;
} else {
currentClassName += ` ${inactiveClassName}`;
}

return <MuiLink className={className} href={href} ref={ref} {...other} />;
}

if (noLinkStyle) {
return <NextLinkComposed className={className} ref={ref} to={href} {...other} />;
}

return (
<MuiLink
component={NextLinkComposed}
linkAs={linkAs}
className={className}
ref={ref}
to={href}
{...other}
/>
);
});

Link.propTypes = {
activeClassName: PropTypes.string,
as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
className: PropTypes.string,
href: PropTypes.any,
linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
noLinkStyle: PropTypes.bool,
role: PropTypes.string,
};

export default Link;
return (
<NextLink href={href} {...rest}>
<a className={currentClassName}>{children({ isActive })}</a>
</NextLink>
);
}
95 changes: 43 additions & 52 deletions components/SignIn.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme();
Expand All @@ -27,48 +18,48 @@ export default function SignIn() {
};

return (
<ThemeProvider theme={theme}>
<Box component="form" onSubmit={handleSubmit} noValidate>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
minHeight: "100%",
}}
>
<div>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</div>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
</div>
</Box>
</ThemeProvider>
// <ThemeProvider theme={theme}>
<Box
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
minHeight: "50vh",
}}
component="form"
onSubmit={handleSubmit}
noValidate
>
<div>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</div>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
</Box>
// </ThemeProvider>
);
}
8 changes: 0 additions & 8 deletions components/SignUp.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,9 @@
import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";
import Link from "@mui/material/Link";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";

function Copyright(props) {
Expand Down Expand Up @@ -62,7 +55,6 @@ export default function SignUp() {
label="First Name"
name="name"
autoComplete="name"
autoFocus
variant="outlined"
/>
<TextField
Expand Down
Loading

0 comments on commit 4a8c5ef

Please sign in to comment.