Made arrows optional and refactored routes
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
bfa3e9960c
commit
2796aad456
|
@ -95,4 +95,12 @@
|
|||
.arrow {
|
||||
width: calc(200rem / 16);
|
||||
}
|
||||
}
|
||||
|
||||
.containerOnlyRightArrow {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.containerOnlyLeftArrow {
|
||||
justify-content: flex-start;
|
||||
}
|
|
@ -4,35 +4,49 @@ import React from "react";
|
|||
import styles from "./BottomNav.module.css";
|
||||
|
||||
interface PagesInfo {
|
||||
leftPageLink: string;
|
||||
leftPageName: string;
|
||||
rightPageLink: string;
|
||||
rightPageName: string;
|
||||
leftPage?: {
|
||||
url: string;
|
||||
name: string;
|
||||
};
|
||||
rightPage?: {
|
||||
url: string;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function BottomNav(props: PagesInfo) {
|
||||
const onlyRightArrow = props.rightPage && !props.leftPage;
|
||||
const onlyLeftArrow = !props.rightPage && props.leftPage;
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.subBox + " " + styles.subBoxLeft}>
|
||||
<Link href={props.leftPageLink}>
|
||||
<a>
|
||||
<Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={props.leftPageLink}>
|
||||
<a className={styles.item}>{props.leftPageName}</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.subBox}>
|
||||
<Link href={props.rightPageLink}>
|
||||
<a className={styles.item}>{props.rightPageName}</a>
|
||||
</Link>
|
||||
<Link href={props.rightPageLink}>
|
||||
<a>
|
||||
<Arrow isPointingRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.container}
|
||||
${onlyRightArrow ? styles.containerOnlyRightArrow : ""}
|
||||
${onlyLeftArrow ? styles.containerOnlyLeftArrow : ""}`}
|
||||
>
|
||||
{props.leftPage ? (
|
||||
<div className={styles.subBox + " " + styles.subBoxLeft}>
|
||||
<Link href={props.leftPage.url}>
|
||||
<a>
|
||||
<Arrow />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={props.leftPage.url}>
|
||||
<a className={styles.item}>{props.leftPage.name}</a>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
{props.rightPage ? (
|
||||
<div className={styles.subBox}>
|
||||
<Link href={props.rightPage.url}>
|
||||
<a className={styles.item}>{props.rightPage.name}</a>
|
||||
</Link>
|
||||
<Link href={props.rightPage.url}>
|
||||
<a>
|
||||
<Arrow isPointingRight />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { sectionsData } from "data/routes";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
|
||||
|
@ -61,7 +61,7 @@ export function Header() {
|
|||
</button>
|
||||
</div>
|
||||
<div className={styles.sectionsWrapper}>
|
||||
<Sections data={sectionsData} showHeader={false} />
|
||||
<Sections data={pageRoutes} showHeader={false} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
@ -1,16 +1,12 @@
|
|||
import { PageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
|
||||
import styles from "./Sections.module.css";
|
||||
|
||||
interface SectionsData {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
interface SectionsProps {
|
||||
/* Whether to display the "Sections" title and separator that appears on the left. */
|
||||
showHeader?: boolean;
|
||||
data: SectionsData[];
|
||||
data: PageRoutes;
|
||||
}
|
||||
|
||||
export function Sections({ data, showHeader = true }: SectionsProps) {
|
||||
|
@ -26,7 +22,7 @@ export function Sections({ data, showHeader = true }: SectionsProps) {
|
|||
)}
|
||||
<nav className={styles.nav}>
|
||||
<ul>
|
||||
{data.map((datum, index) => {
|
||||
{Object.values(data).map((datum, index) => {
|
||||
return (
|
||||
<li key={`${datum.name}-${index}`}>
|
||||
<a href={datum.url}>
|
||||
|
|
|
@ -1,46 +1,65 @@
|
|||
export const sectionsData = [
|
||||
{
|
||||
export interface PageRoute {
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
type PageID =
|
||||
| "demographics"
|
||||
| "academics"
|
||||
| "coop"
|
||||
| "lifestyleAndInterests"
|
||||
| "intimacyAndDrugs"
|
||||
| "postGrad"
|
||||
| "friends"
|
||||
| "miscellaneous"
|
||||
| "mentalHealth"
|
||||
| "personal"
|
||||
| "contributors";
|
||||
|
||||
export type PageRoutes = { [key in PageID]: PageRoute };
|
||||
export const pageRoutes: PageRoutes = {
|
||||
demographics: {
|
||||
name: "Demographics",
|
||||
url: "/demographics",
|
||||
},
|
||||
{
|
||||
academics: {
|
||||
name: "Academics",
|
||||
url: "/academics",
|
||||
},
|
||||
{
|
||||
coop: {
|
||||
name: "Co-op",
|
||||
url: "/coop",
|
||||
},
|
||||
{
|
||||
lifestyleAndInterests: {
|
||||
name: "Lifestyle and Interests",
|
||||
url: "/lifestyle-and-interests",
|
||||
},
|
||||
{
|
||||
intimacyAndDrugs: {
|
||||
name: "Intimacy and Drugs",
|
||||
url: "/intimacy-and-drugs",
|
||||
},
|
||||
{
|
||||
postGrad: {
|
||||
name: "Post-grad",
|
||||
url: "/postgrad",
|
||||
url: "/post-grad",
|
||||
},
|
||||
{
|
||||
friends: {
|
||||
name: "Friends",
|
||||
url: "/friends",
|
||||
},
|
||||
{
|
||||
miscellaneous: {
|
||||
name: "Miscellaneous",
|
||||
url: "/miscellaneous",
|
||||
},
|
||||
{
|
||||
mentalHealth: {
|
||||
name: "Mental Health",
|
||||
url: "/mental-health",
|
||||
},
|
||||
{
|
||||
personal: {
|
||||
name: "Personal",
|
||||
url: "/personal",
|
||||
},
|
||||
{
|
||||
contributors: {
|
||||
name: "Contributors",
|
||||
url: "/contributors",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
|
|
@ -13,7 +13,7 @@ import {
|
|||
mockTimelineData,
|
||||
mockGroupedBarGraphData,
|
||||
} from "data/mocks";
|
||||
import { sectionsData } from "data/routes";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import { Color } from "utils/Color";
|
||||
|
||||
|
@ -208,7 +208,7 @@ export default function Home() {
|
|||
<h2>
|
||||
<code>{"<Sections />"}</code>
|
||||
</h2>
|
||||
<Sections data={sectionsData} />
|
||||
<Sections data={pageRoutes} />
|
||||
|
||||
<h2>
|
||||
<code>{"<About />"}</code>
|
||||
|
@ -245,10 +245,8 @@ export default function Home() {
|
|||
<code>{"<BottomNav />"}</code>
|
||||
</h2>
|
||||
<BottomNav
|
||||
leftPageLink="/"
|
||||
leftPageName="Demographics"
|
||||
rightPageLink="/"
|
||||
rightPageName="Co-ops"
|
||||
leftPage={pageRoutes.demographics}
|
||||
rightPage={pageRoutes.coop}
|
||||
></BottomNav>
|
||||
|
||||
<h2>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
||||
import { pageRoutes } from "data/routes";
|
||||
import React from "react";
|
||||
import { useWindowDimensions } from "utils/getWindowDimensions";
|
||||
import { useIsMobile } from "utils/isMobile";
|
||||
|
@ -125,10 +126,8 @@ export default function SamplePage() {
|
|||
/>
|
||||
</ComponentWrapper>
|
||||
<BottomNav
|
||||
leftPageLink="/"
|
||||
leftPageName="Demographics"
|
||||
rightPageLink="/"
|
||||
rightPageName="Co-ops"
|
||||
leftPage={pageRoutes.demographics}
|
||||
rightPage={pageRoutes.contributors}
|
||||
></BottomNav>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue