add bottom nav

pull/64/head
Rebecca-Chou 2 months ago
parent b411055d88
commit e7131529e3
  1. 40
      components/BottomNav.module.css
  2. 57
      components/BottomNav.tsx
  3. 2
      pages/playground.tsx

@ -1,15 +1,45 @@
.container {
display: flex;
flex-flow: space-between;
flex-flow: center;
align-items: center;
justify-content: space-around;
/* or inline-flex */
}
.item {}
.item {
display: inline-block;
color: var(--primary-text);
font-size: calc(28rem / 16);
position: relative;
}
.item:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
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);
}
.anglePath {
stroke: var(--primary-accent)
.arrowPath {
fill: var(--primary-text);
}
.left.arrow {
.left {
transform: rotate(180deg);
}

@ -1,32 +1,61 @@
import Link from "next/link";
import React from "react";
import styles from "./BottomNav.module.css";
export function BottomNav() {
interface PageLinks {
leftPage: string;
rightPage: string;
}
export function BottomNav(props: PageLinks) {
return (
<div className={styles.container}>
<Arrow pointLeft={true}></Arrow>
<p className={styles.item}>View Demographics</p>
<p className={styles.item}>View Co-ops</p>
<Arrow pointLeft={false}></Arrow>
<Arrow isPointRight={true}></Arrow>
<Link href={props.leftPage}>
<a className={styles.item}>View Demographics</a>
</Link>
<Link href={props.leftPage}>
<a className={styles.item}>View Co-ops</a>
</Link>
<Arrow isPointRight={false}></Arrow>
</div>
);
}
interface ArrowProps {
pointLeft: boolean;
isPointRight: boolean;
}
function Arrow({ pointLeft }: ArrowProps) {
function Arrow({ isPointRight }: ArrowProps) {
return (
<svg
viewBox="0 0 50 50"
className={pointLeft ? `${styles.left} ${styles.arrow}` : styles.arrow}
width="300px"
height="150px"
className={isPointRight ? styles.right : styles.left}
>
<path
d="M100,2 L2,2 L2,100"
fill="none"
strokeWidth="10"
className={styles.anglePath}
<defs>
<marker
id="arrow"
markerWidth="10"
markerHeight="10"
refX="5"
refY="3"
orient="auto"
markerUnits="strokeWidth"
>
<path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
</marker>
</defs>
<line
x1="295"
y1="75"
x2="95"
y2="75"
strokeWidth="3"
markerEnd="url(#arrow)"
className={styles.linePath}
/>
</svg>
);

@ -135,7 +135,7 @@ export default function Home() {
</div>
<h2></h2>
<BottomNav></BottomNav>
<BottomNav leftPage="/" rightPage="/"></BottomNav>
</div>
);
}

Loading…
Cancel
Save