daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-01 16:08:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Support old and new TopNav designs

Browse Source
This commit is contained in:
Brandon Thomas committed 2022-07-10 20:45:25 -04:00
1 parent 2b6f54bce1
commit 01556b32dc
1 file changed
+140 -16
Download Patch File Download Diff File Expand all files Collapse all files
packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+140 -16
View File
@@ -5,6 +5,8 @@ import { MigrationTopNavSession } from "../../migration/MigrationTopNav_Session"
import { FrontendUrlConfig } from "../../common/FrontendUrlConfig";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faGavel,
faGrinBeamSweat,
faMicrophone,
faVolumeUp,
faPlus,
@@ -17,6 +19,7 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { faPatreon } from "@fortawesome/free-brands-svg-icons";
import { t } from "i18next";
import { USE_REFRESH } from "../../Refresh";
interface Props {
sessionWrapper: SessionWrapper;
@@ -32,25 +35,146 @@ function NewTopNavFc(props: Props) {
myDataLink = `/profile/${username}`;
}
// const [mobileHamburgerIsActive, setMobileHamburgerIsActive] =
// useState<boolean>(false);
const [mobileHamburgerIsActive, setMobileHamburgerIsActive] = useState<boolean>(false);
// const toggleHamburger = () => {
// setMobileHamburgerIsActive(!mobileHamburgerIsActive);
// };
const toggleHamburger = () => {
setMobileHamburgerIsActive(!mobileHamburgerIsActive);
};
// const closeHamburger = () => {
// // TODO: This is an ergonomic hack.
// // The hamburger ideally should close whenever it is no longer active.
// setMobileHamburgerIsActive(false);
// };
const closeHamburger = () => {
// TODO: This is an ergonomic hack.
// The hamburger ideally should close whenever it is no longer active.
setMobileHamburgerIsActive(false);
};
// const navbarClasses = mobileHamburgerIsActive
// ? "navbar-menu is-active"
// : "navbar-menu";
// const navbarBurgerClasses = mobileHamburgerIsActive
// ? "navbar-burger is-active"
// : "navbar-burger";
const navbarClasses = mobileHamburgerIsActive ? "navbar-menu is-active" : "navbar-menu";
const navbarBurgerClasses = mobileHamburgerIsActive ? "navbar-burger is-active" : "navbar-burger";
if (!USE_REFRESH) {
return (
<>
<nav className="navbar is-transparent padding-bottom-1em">
<div className="navbar-brand">
<Link className="navbar-item" to="/">
<img src="/fakeyou/fakeyou-nav-logo-mascot.webp" alt="FakeYou: Cartoon and Celebrity Text to Speech" />
</Link>
<div className={navbarBurgerClasses} data-target="navbarExampleTransparentExample" onClick={() => toggleHamburger()}>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navbarExampleTransparentExample" className={navbarClasses}>
<div className="navbar-start">
<Link to={FrontendUrlConfig.cloneRequestPage()}
className="navbar-item "
onClick={() => closeHamburger()}
>Clone&nbsp;My&nbsp;Voice!</Link>
{/* DROPDOWN: CREATE */}
<div className="navbar-item has-dropdown is-hoverable">
<Link to={FrontendUrlConfig.indexPage()}
className="navbar-link"
onClick={() => closeHamburger()}
>{t('coreUi.topNav.create')}</Link>
<div className="navbar-dropdown is-boxed">
{/* NB: There's an "is-active" class that looks nice. */}
<Link to="/"
className="navbar-item"
onClick={() => closeHamburger()}
>TTS</Link>
<Link to="/video"
className="navbar-item"
onClick={() => closeHamburger()}
>{t('coreUi.topNav.video')}</Link>
</div>
</div>
{/* DROPDOWN: COMMUNITY */}
<div className="navbar-item has-dropdown is-hoverable">
<Link to={myDataLink}
className="navbar-link"
onClick={() => closeHamburger()}
>{t('coreUi.topNav.community')}</Link>
<div className="navbar-dropdown is-boxed">
{/* NB: There's an "is-active" class that looks nice. */}
<Link to="/contribute"
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faUpload} />&nbsp;&nbsp;{t('coreUi.topNav.contributeUpload')}</Link>
<Link to="/leaderboard"
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faTrophy} />&nbsp;&nbsp;{t('coreUi.topNav.leaderboard')}</Link>
<Link to={FrontendUrlConfig.patronsPage()}
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faPatreon}/>&nbsp;&nbsp;{t('coreUi.topNav.patrons')}</Link>
<Link to="/firehose"
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faList} />&nbsp;&nbsp;{t('coreUi.topNav.feed')}</Link>
<hr className="navbar-divider" />
<Link to={myDataLink}
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faUser} />&nbsp;&nbsp;{t('coreUi.topNav.myData')}</Link>
<hr className="navbar-divider" />
<Link to={FrontendUrlConfig.aboutUsPage()}
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faGrinBeamSweat} />&nbsp;&nbsp;{t('coreUi.topNav.aboutUs')}</Link>
<Link to={FrontendUrlConfig.termsPage()}
className="navbar-item"
onClick={() => closeHamburger()}
><FontAwesomeIcon icon={faGavel} />&nbsp;&nbsp;{t('coreUi.topNav.terms')}</Link>
</div>
</div>
<a href={FrontendUrlConfig.developerDocs()}
className="navbar-item"
onClick={() => closeHamburger()}
>{t('coreUi.topNav.developers')}</a>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="field is-grouped">
<p className="control">
<MigrationTopNavSession
sessionWrapper={props.sessionWrapper}
enableAlpha={true}
querySessionAction={props.querySessionCallback}
closeHamburgerAction={() => closeHamburger()}
/>
</p>
</div>
</div>
</div>
</div>
</nav>
</>
);
}
return (
<div>