add bottom nav
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
b411055d88
commit
e7131529e3
|
@ -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 {}
|
||||
|
||||
.anglePath {
|
||||
stroke: var(--primary-accent)
|
||||
.item {
|
||||
display: inline-block;
|
||||
color: var(--primary-text);
|
||||
font-size: calc(28rem / 16);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.left.arrow {
|
||||
.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);
|
||||
}
|
||||
|
||||
.arrowPath {
|
||||
fill: var(--primary-text);
|
||||
}
|
||||
|
||||
.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…
Reference in New Issue