mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 23:04:21 +00:00
✨ Add BreadcrumbsBox for navigation (closes #70)
This commit is contained in:
parent
d62df362d3
commit
65bf6539d7
5 changed files with 117 additions and 7 deletions
|
@ -23,6 +23,7 @@ import {NotebookRouter} from "./components/notebook/NotebookRouter"
|
||||||
import {ProjectCreateBox} from "./components/project/ProjectCreateBox"
|
import {ProjectCreateBox} from "./components/project/ProjectCreateBox"
|
||||||
import {ProjectListBox} from "./components/project/ProjectListBox"
|
import {ProjectListBox} from "./components/project/ProjectListBox"
|
||||||
import {ProjectRouter} from "./components/project/ProjectRouter"
|
import {ProjectRouter} from "./components/project/ProjectRouter"
|
||||||
|
import {BreadcrumbsBox} from "./components/routing/BreadcrumbsBox"
|
||||||
import {ThemedBluelib} from "./components/theme/ThemedBluelib"
|
import {ThemedBluelib} from "./components/theme/ThemedBluelib"
|
||||||
import {ThemedTitle} from "./components/theme/ThemedTitle"
|
import {ThemedTitle} from "./components/theme/ThemedTitle"
|
||||||
import {AuthorizationProvider} from "./contexts/authorization"
|
import {AuthorizationProvider} from "./contexts/authorization"
|
||||||
|
@ -41,6 +42,7 @@ function App({..._}: RouteComponentProps) {
|
||||||
<LayoutThreeCol.Center>
|
<LayoutThreeCol.Center>
|
||||||
<ThemedTitle level={1}/>
|
<ThemedTitle level={1}/>
|
||||||
<ErrorCatcherBox>
|
<ErrorCatcherBox>
|
||||||
|
<BreadcrumbsBox/>
|
||||||
<Chapter>
|
<Chapter>
|
||||||
<SophonDescriptionBox/>
|
<SophonDescriptionBox/>
|
||||||
</Chapter>
|
</Chapter>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as React from "react"
|
|
||||||
import * as Reach from "@reach/router"
|
import * as Reach from "@reach/router"
|
||||||
import {Anchor, BringAttention as B} from "@steffo/bluelib-react";
|
import {Anchor, BringAttention as B} from "@steffo/bluelib-react"
|
||||||
import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
|
import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor"
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -18,19 +18,21 @@ export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Elem
|
||||||
if (onClick) {
|
if (onClick) {
|
||||||
onClick(event)
|
onClick(event)
|
||||||
}
|
}
|
||||||
if (href) {
|
if(href) {
|
||||||
// noinspection JSIgnoredPromiseFromCall
|
// noinspection JSIgnoredPromiseFromCall
|
||||||
Reach.navigate(href)
|
Reach.navigate(href)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[href, onClick]
|
[href, onClick],
|
||||||
)
|
)
|
||||||
|
|
||||||
if (location.pathname === href) {
|
// FIXME: Shenanigans?
|
||||||
|
if(location.pathname.replace("%25", "%") === href) {
|
||||||
return (
|
return (
|
||||||
<B children={children} {...props}/>
|
<B children={children} {...props}/>
|
||||||
)
|
)
|
||||||
} else {
|
}
|
||||||
|
else {
|
||||||
return (
|
return (
|
||||||
<Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
|
<Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
|
||||||
)
|
)
|
||||||
|
|
22
frontend/src/components/routing/BreadcrumbLink.tsx
Normal file
22
frontend/src/components/routing/BreadcrumbLink.tsx
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
|
||||||
|
import * as React from "react"
|
||||||
|
import {IconText} from "../elements/IconText"
|
||||||
|
import {Link} from "../elements/Link"
|
||||||
|
|
||||||
|
|
||||||
|
export interface BreadcrumbLinkProps {
|
||||||
|
href: string,
|
||||||
|
icon: IconDefinition,
|
||||||
|
text: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function BreadcrumbLink({href, icon, text}: BreadcrumbLinkProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Link href={href}>
|
||||||
|
<IconText icon={icon}>
|
||||||
|
{text}
|
||||||
|
</IconText>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
12
frontend/src/components/routing/BreadcrumbSeparator.tsx
Normal file
12
frontend/src/components/routing/BreadcrumbSeparator.tsx
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import {faChevronRight} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
|
||||||
|
export function BreadcrumbSeparator(): JSX.Element {
|
||||||
|
return <>
|
||||||
|
|
||||||
|
<FontAwesomeIcon icon={faChevronRight}/>
|
||||||
|
|
||||||
|
</>
|
||||||
|
}
|
72
frontend/src/components/routing/BreadcrumbsBox.tsx
Normal file
72
frontend/src/components/routing/BreadcrumbsBox.tsx
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
import {faBook, faProjectDiagram, faServer, faUniversity, faUser, faUsers} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import {Box} from "@steffo/bluelib-react"
|
||||||
|
import * as React from "react"
|
||||||
|
import {useSophonPath} from "../../hooks/useSophonPath"
|
||||||
|
import {InstanceEncoder} from "../../utils/InstanceEncoder"
|
||||||
|
import {BreadcrumbLink} from "./BreadcrumbLink"
|
||||||
|
import {BreadcrumbSeparator} from "./BreadcrumbSeparator"
|
||||||
|
|
||||||
|
|
||||||
|
export function BreadcrumbsBox(): JSX.Element {
|
||||||
|
const location = useSophonPath()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={"/"}
|
||||||
|
icon={faServer}
|
||||||
|
text={"Sophon"}
|
||||||
|
/>
|
||||||
|
{location.instance ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator/>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={`/i/${location.instance}/`}
|
||||||
|
icon={faUniversity}
|
||||||
|
text={InstanceEncoder.decode(location.instance).toString()}
|
||||||
|
/>
|
||||||
|
{location.loggedIn ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator/>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={`/i/${location.instance}/l/logged-in/`}
|
||||||
|
icon={faUser}
|
||||||
|
text={"Logged in"}
|
||||||
|
/>
|
||||||
|
{location.researchGroup ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator/>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/`}
|
||||||
|
icon={faUsers}
|
||||||
|
text={location.researchGroup}
|
||||||
|
/>
|
||||||
|
{location.researchProject ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator/>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/`}
|
||||||
|
icon={faProjectDiagram}
|
||||||
|
text={location.researchProject}
|
||||||
|
/>
|
||||||
|
{location.notebook ? (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator/>
|
||||||
|
<BreadcrumbLink
|
||||||
|
href={`/i/${location.instance}/l/logged-in/g/${location.researchGroup}/p/${location.researchProject}/n/${location.notebook}/`}
|
||||||
|
icon={faBook}
|
||||||
|
text={location.notebook}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in a new issue