diff --git a/src/app/layout.js b/src/app/layout.js index da46b5f..77d18c7 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -12,7 +12,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - +
{children} diff --git a/src/assets/backgroundTry.png b/src/assets/backgroundTry.png new file mode 100644 index 0000000..d4978cd Binary files /dev/null and b/src/assets/backgroundTry.png differ diff --git a/src/components/desktopHeader.jsx b/src/components/desktopHeader.jsx index 4f64b28..f9fca99 100644 --- a/src/components/desktopHeader.jsx +++ b/src/components/desktopHeader.jsx @@ -1,10 +1,9 @@ import Link from "next/link"; +import { DesktopLinks } from "./mobileHeader/links"; export const DesktopHeader = () =>
-
\ No newline at end of file + diff --git a/src/components/mobileHeader/Icons.jsx b/src/components/mobileHeader/Icons.jsx new file mode 100644 index 0000000..329693a --- /dev/null +++ b/src/components/mobileHeader/Icons.jsx @@ -0,0 +1,18 @@ +export const CloseIcon = () => ( + + + + + + ); + + export const MenuIcon = () => ( + + ); diff --git a/src/components/mobileHeader/header.jsx b/src/components/mobileHeader/header.jsx index 3334b79..33fd095 100644 --- a/src/components/mobileHeader/header.jsx +++ b/src/components/mobileHeader/header.jsx @@ -2,15 +2,16 @@ import { useState } from "react" import { Overlay } from "./overlay"; +import { MenuIcon } from "./Icons"; export const MobileHeader = () => { const [isOpen, setIsOpen] = useState(false); - return
-
diff --git a/src/components/mobileHeader/links.jsx b/src/components/mobileHeader/links.jsx index 32b3699..fb4fdc9 100644 --- a/src/components/mobileHeader/links.jsx +++ b/src/components/mobileHeader/links.jsx @@ -1,5 +1,37 @@ import Link from "next/link"; -export const Links = () =>
- setIsOpen(false)}>Home - setIsOpen(false)}>Movies -
\ No newline at end of file + +export const NavLink = ({ href, children, onClick, additionalClasses }) => ( + + {children} + + ); + + export const LinksWrapper = ({ children, additionalClasses }) => ( +
+ {children} +
+ ); + + export const MobileLinks = () => + + setIsOpen(false)}> + Home + + + setIsOpen(false)}> + Movies + + + + +export const DesktopLinks = () => + + + Home + + + + Movies + + diff --git a/src/components/mobileHeader/overlay.jsx b/src/components/mobileHeader/overlay.jsx index 5b3d66e..8258e54 100644 --- a/src/components/mobileHeader/overlay.jsx +++ b/src/components/mobileHeader/overlay.jsx @@ -1,17 +1,17 @@ +import { CloseIcon } from "./Icons"; +import { MobileLinks } from "./links"; + + +export const Overlay = ({ setIsOpen, isOpen }) => +
+ + +
-export const Overlay = ({ setIsOpen, isOpen }) =>
- -
\ No newline at end of file