diff --git a/app/petdex/page.tsx b/app/petdex/page.tsx index 5196481..a5c7e27 100644 --- a/app/petdex/page.tsx +++ b/app/petdex/page.tsx @@ -1,5 +1,11 @@ +import { Navbar } from "@/components/petdex/Navbar/Navbar"; + function Page() { - return

Petdex

+ return ( + <> + + + ); } export default Page diff --git a/components/petdex/Navbar/Navbar.tsx b/components/petdex/Navbar/Navbar.tsx new file mode 100644 index 0000000..c1299c4 --- /dev/null +++ b/components/petdex/Navbar/Navbar.tsx @@ -0,0 +1,77 @@ +'use client' + +import { useState } from 'react' +import { Logo } from './assets/Logo' +import { MenuButtonClose } from './assets/MenuButtonClose' +import { SearchIcon } from './assets/SearchIcon' +import { Menu } from './assets/Menu' +import { LogoMobile } from './assets/LogoMobile' +import { MenuButtonMobile } from './assets/MenuButtonMobile' +import { NavbarTypes } from './Navbar.types' +import { MenuMobile } from './assets/MenuMobile' + +function Navbar() { + const [isOpen, setIsOpen] = useState(false) + const [isSearch, setIsSearch] = useState(false) + + const handleButton = () => setIsOpen(o => !o) + + const handleSearchButton = () => setIsSearch(s => !s) + + return ( +
+
+
+ +
+
+ +
+ + + +
+ + + + {!isSearch && +
+ {isOpen + ? + : + } +
+ } +
+
+
+ ) +} + +export { Navbar } \ No newline at end of file diff --git a/components/petdex/Navbar/Navbar.types.ts b/components/petdex/Navbar/Navbar.types.ts new file mode 100644 index 0000000..f17103e --- /dev/null +++ b/components/petdex/Navbar/Navbar.types.ts @@ -0,0 +1,5 @@ + +export type NavbarTypes = & { + handleSearchButton?: () => boolean | void + handleButton?: () => boolean +} \ No newline at end of file diff --git a/components/petdex/Navbar/assets/Logo.tsx b/components/petdex/Navbar/assets/Logo.tsx new file mode 100644 index 0000000..3ab908c --- /dev/null +++ b/components/petdex/Navbar/assets/Logo.tsx @@ -0,0 +1,24 @@ +import { SVGProps } from "react" + +function Logo(props: SVGProps) { + return ( + <> + + < path d="M17.0016 6.49626V6.53373C17.0011 7.26641 17.1293 7.99369 17.3806 8.68355L17.3658 8.63884C17.6101 9.31107 18.0252 9.91089 18.5717 10.3814L18.5766 10.385C19.0947 10.8431 19.7837 11.1222 20.5393 11.1222H20.5983H20.5959C21.5926 11.1166 22.5472 10.7264 23.2537 10.0358C24.0255 9.34004 24.626 8.48089 25.0096 7.52344L25.0256 7.47752C25.3974 6.57267 25.5932 5.60735 25.6027 4.63163V4.58933C25.6027 3.83526 25.4686 3.1114 25.2237 2.43951L25.2385 2.48422C24.9942 1.81199 24.5791 1.21217 24.0326 0.741638L24.0277 0.738012C23.4716 0.246665 22.7452 -0.0170868 21.9974 0.00085922H22.0011C21.004 0.00504458 20.0489 0.395448 19.3432 1.08725C18.5791 1.78298 17.9837 2.63822 17.6009 3.58995L17.5849 3.63587C17.2293 4.48178 17.0189 5.46425 17.0078 6.49264V6.49626H17.0016ZM23.5786 15.6176L23.5773 15.7191C23.5759 16.6279 23.8618 17.5146 24.3956 18.2569L24.3858 18.2424C24.6292 18.5868 24.9538 18.8682 25.332 19.0626C25.7102 19.2571 26.1307 19.3587 26.5576 19.359L26.6794 19.3566H26.6732C27.6818 19.3457 28.6512 18.9716 29.3975 18.3052L29.3938 18.3088C30.1878 17.641 30.8299 16.8167 31.2787 15.8895C31.7274 14.9622 31.9728 13.9527 31.9988 12.9264V12.9167L32 12.8177C32 11.869 31.6973 10.9893 31.1817 10.2678L31.1916 10.2823C30.9383 9.91873 30.5947 9.62465 30.1933 9.42798C29.7919 9.2313 29.3461 9.13854 28.8979 9.15847H28.9041C27.8955 9.16937 26.9261 9.54348 26.1798 10.2098L26.1835 10.2062C25.3883 10.878 24.7456 11.7063 24.2969 12.6374C23.8482 13.5685 23.6034 14.5817 23.5786 15.6116V15.62V15.6176ZM15.9975 15.1077C14.2011 15.204 12.4805 15.851 11.0781 16.9578L11.0953 16.9445C9.37858 18.1419 7.89939 19.6376 6.73077 21.3577L6.69139 21.4194C5.63808 22.8092 5.0225 24.4716 4.92072 26.2012L4.91949 26.2254L4.91703 26.3305C4.91703 26.8187 5.03885 27.2804 5.25419 27.6852L5.2468 27.6695C5.45341 28.0407 5.77609 28.3368 6.16721 28.5142L6.17951 28.519C6.53758 28.687 6.95472 28.8187 7.39031 28.8924L7.41984 28.896C7.87405 28.9664 8.33324 29.0012 8.79306 29H8.88535H8.88042C10.1483 28.9175 11.3921 28.6207 12.5571 28.1226L12.4857 28.1504C13.586 27.6793 14.7589 27.3929 15.9557 27.3033L15.9939 27.3009C17.3511 27.4 18.6086 27.6997 19.7776 28.1698L19.6952 28.1408C20.9141 28.6216 22.2044 28.9048 23.5158 28.9794L23.5503 28.9806C25.9013 28.9822 27.0768 28.0642 27.0768 26.2266C27.0235 24.939 26.6465 23.6843 25.9792 22.5747L26.0002 22.6109C25.2803 21.2813 24.3758 20.0563 23.3128 18.9711L23.3177 18.9759C22.2786 17.9101 21.0904 16.995 19.7887 16.2581L19.7124 16.2182C18.6006 15.537 17.3267 15.1533 16.0172 15.1052H16.0025L15.9975 15.1077ZM11.4017 11.1234H11.4583C12.1839 11.1242 12.8841 10.8607 13.4234 10.3838L13.4209 10.3863C13.9631 9.92269 14.3763 9.33136 14.6219 8.66784L14.6317 8.63884C14.8758 7.96298 14.9995 7.25084 14.9972 6.53373V6.49385V6.49626C14.9861 5.46304 14.7757 4.48178 14.4004 3.5827L14.4201 3.63587C14.0388 2.66807 13.4388 1.79788 12.6654 1.09088L12.6605 1.08725C11.9546 0.396627 11.0002 0.0067715 10.0039 0.00206767H9.94602C9.19051 0.00206767 8.50143 0.282428 7.98094 0.741638L7.9834 0.739221C7.44445 1.20206 7.02855 1.78936 6.78245 2.45763L6.7726 2.48664C6.53758 3.11745 6.40223 3.84614 6.40223 4.60504V4.62921V4.628C6.41289 5.62427 6.61537 6.60957 6.99901 7.5319L6.97933 7.47873C7.36091 8.45181 7.96552 9.32554 8.7463 10.0322L8.75122 10.037C9.45808 10.7259 10.412 11.1147 11.4078 11.1198H11.4091L11.4017 11.1234ZM3.09592 9.16089L2.98271 9.15847C2.08323 9.15847 1.28957 9.60077 0.814598 10.2763L0.808445 10.2847C0.279819 11.0285 -0.00247574 11.9142 1.71661e-05 12.8213L0.00124931 12.9252V12.9204C0.0254803 13.9461 0.269035 14.9553 0.716108 15.8825C1.16318 16.8098 1.80378 17.6344 2.59634 18.3028L2.60618 18.3113C3.35134 18.9751 4.31832 19.3478 5.32432 19.359H5.32679C5.77114 19.3786 6.21333 19.2875 6.6122 19.0942C7.01107 18.9008 7.35367 18.6116 7.6081 18.2532L7.61426 18.2448C8.16394 17.4762 8.44698 16.5541 8.42145 15.6152V15.62C8.39789 14.5907 8.15476 13.5777 7.70776 12.6465C7.26076 11.7152 6.61983 10.8863 5.82636 10.2134L5.81652 10.205C5.0722 9.54322 4.10725 9.17146 3.1033 9.15968H3.10084L3.09592 9.16089Z" fill="#003459" /> + + + + + + + + + ) +} + +export { Logo } \ No newline at end of file diff --git a/components/petdex/Navbar/assets/LogoMobile.tsx b/components/petdex/Navbar/assets/LogoMobile.tsx new file mode 100644 index 0000000..f65bfe5 --- /dev/null +++ b/components/petdex/Navbar/assets/LogoMobile.tsx @@ -0,0 +1,16 @@ + +function LogoMobile() { + return ( + + + + ) +} + +export { LogoMobile } \ No newline at end of file diff --git a/components/petdex/Navbar/assets/Menu.tsx b/components/petdex/Navbar/assets/Menu.tsx new file mode 100644 index 0000000..666ae9e --- /dev/null +++ b/components/petdex/Navbar/assets/Menu.tsx @@ -0,0 +1,19 @@ +import Link from "next/link" + +function Menu() { + return ( + + ) +} + +export { Menu } diff --git a/components/petdex/Navbar/assets/MenuButtonClose.tsx b/components/petdex/Navbar/assets/MenuButtonClose.tsx new file mode 100644 index 0000000..22b3942 --- /dev/null +++ b/components/petdex/Navbar/assets/MenuButtonClose.tsx @@ -0,0 +1,16 @@ +'use client' + +function MenuButtonClose({ handleButton }) { + + return ( + <> + + + + + + + ) +} + +export { MenuButtonClose } diff --git a/components/petdex/Navbar/assets/MenuButtonMobile.tsx b/components/petdex/Navbar/assets/MenuButtonMobile.tsx new file mode 100644 index 0000000..9d52a7b --- /dev/null +++ b/components/petdex/Navbar/assets/MenuButtonMobile.tsx @@ -0,0 +1,13 @@ + +function MenuButtonMobile({ handleButton }) { + return ( + + + + ) +} + + +export { MenuButtonMobile } \ No newline at end of file diff --git a/components/petdex/Navbar/assets/MenuMobile.tsx b/components/petdex/Navbar/assets/MenuMobile.tsx new file mode 100644 index 0000000..45bcd14 --- /dev/null +++ b/components/petdex/Navbar/assets/MenuMobile.tsx @@ -0,0 +1,19 @@ +import Link from "next/link" + +function MenuMobile({ isOpen }) { + return ( + + ) +} + +export { MenuMobile } diff --git a/components/petdex/Navbar/assets/SearchIcon.tsx b/components/petdex/Navbar/assets/SearchIcon.tsx new file mode 100644 index 0000000..b98fc15 --- /dev/null +++ b/components/petdex/Navbar/assets/SearchIcon.tsx @@ -0,0 +1,19 @@ +import { NavbarTypes } from "../Navbar.types" + + + +function SearchIcon({ handleSearchButton }: NavbarTypes) { + return ( + + + + ) +} + +export { SearchIcon } \ No newline at end of file diff --git a/styles/theme.css b/styles/theme.css index e8adcad..40b5760 100644 --- a/styles/theme.css +++ b/styles/theme.css @@ -88,10 +88,8 @@ } .dark-gradient { - background: linear-gradient( - 232deg, - rgba(23, 28, 35, 0.41) 0%, - rgba(19, 22, 28, 0.7) 100% - ); + background: linear-gradient(232deg, + rgba(23, 28, 35, 0.41) 0%, + rgba(19, 22, 28, 0.7) 100%); } -} +} \ No newline at end of file