diff --git a/components/BottomNav.module.css b/components/BottomNav.module.css new file mode 100644 index 0000000..be16f23 --- /dev/null +++ b/components/BottomNav.module.css @@ -0,0 +1,98 @@ +.container { + display: flex; + flex-flow: center; + align-items: center; + justify-content: space-between; + margin: calc(40rem / 16) 0; +} + +.subBox { + display: inline-block; +} + +.item { + color: var(--primary-text); + font-size: calc(28rem / 16); + position: relative; + margin: calc(24rem / 16); +} + +.subBox { + display: flex; + flex-direction: row; + align-items: center; +} + +.arrow { + width: calc(250rem / 16); + height: calc(20rem / 16); + display: flex; + align-items: center; + justify-content: center; +} + + +.item:after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: calc(2rem / 16); + bottom: 0; + left: 0; + background-color: var(--primary-accent); + cursor: pointer; + transform-origin: bottom right; + transition: transform 0.25s ease-out; +} + +.item:hover:after { + transform: scaleX(1); + transform-origin: bottom left; +} + +.linePath { + stroke: var(--primary-text); +} + +.arrowPath { + fill: var(--primary-text); +} + +.right { + transform: rotate(180deg); +} + +@media screen and (max-width: 768px) { + .subBox { + flex-direction: column; + align-items: flex-start; + } + + .subBoxLeft { + flex-direction: column-reverse; + align-items: flex-end; + } + + + .item { + font-size: calc(20rem / 16); + margin: 0; + margin-bottom: calc(10rem / 16); + } + + .arrow { + width: calc(200rem / 16); + } +} + +@media screen and (max-width: 500px) { + .container { + justify-content: center; + gap: calc(50rem / 16); + } + + .arrow { + width: calc(200rem / 16); + } +} \ No newline at end of file diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx new file mode 100644 index 0000000..2829705 --- /dev/null +++ b/components/BottomNav.tsx @@ -0,0 +1,72 @@ +import Link from "next/link"; +import React from "react"; + +import styles from "./BottomNav.module.css"; + +interface PagesInfo { + leftPageLink: string; + leftPageName: string; + rightPageLink: string; + rightPageName: string; +} + +export function BottomNav(props: PagesInfo) { + return ( +
{" "}
+ {" "}