Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎢 Add basic joyride tour for navbar #479

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

🎢 Add basic joyride tour for navbar #479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8df7338
meh
Jul 20, 2021
efc922c
lint
Jul 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"react-dom": "^17.0.1",
"react-easy-crop": "^3.3.1",
"react-intl": "^5.12.3",
"react-joyride": "^2.3.0",
"react-loader-spinner": "^3.1.5",
"react-mapbox-gl": "^4.7.3",
"react-router-dom": "^5.2.0",
Expand Down
51 changes: 46 additions & 5 deletions client/src/components/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { NavLink } from 'react-router-dom';
import { Layout, Drawer, Button, Menu, Select } from 'antd';
import { MenuOutlined } from '@ant-design/icons';
import { FormattedMessage } from 'react-intl';
import JoyRide from 'react-joyride';

import useWindowDimensions from '../utils/mobile';
import { useAuth } from '../utils/use-auth';
Expand Down Expand Up @@ -38,22 +39,62 @@ const globe = (
/>
);

const JoyRideSteps = [
{
target: '.nav-desktop',
content: `
Welcome to YMCA NAWC’s Oasis!
Here, you’ll find resources in the Champaign area.
Click the next arrow to learn more about how to use our website!`,
},
{
target: '.joyride-navbar',
content: `You can find different areas of the website here.`,
},
{
target: '.joyride-home',
content: `Home brings you back to the homepage.`,
},
{
target: '.joyride-resources',
content: `Resources shows you Champaign’s resources.`,
},
{
target: '.joyride-login',
content: `Login allows you to sign up for an account
to save important resources.`,
},
{
target: '.joyride-translation',
content: `This allows you to choose what language to use.
We currently support English, Chinese, Spanish, and French.`,
},
];

const NavDesktop = (props: NavigationProps) => {
const { language, setLanguage } = props;
const { authed, authRoleIsEquivalentTo } = useAuth();

return (
<Header className="nav-desktop">
<JoyRide
steps={JoyRideSteps}
continuous
showSkipButton
locale={{
last: 'End',
}}
/>
<NavLink exact to="/" aria-label="logo">
<div className="nav-desktop-logo" />
</NavLink>
<Menu mode="horizontal">
<Menu.Item key="home">
<Menu mode="horizontal" className="joyride-navbar">
<Menu.Item key="home" className="joyride-home">
<NavLink exact to="/" activeClassName="navbar-active-style">
<FormattedMessage id="home" defaultMessage="Home" />
</NavLink>
</Menu.Item>
<Menu.Item key="resources">
<Menu.Item key="resources" className="joyride-resources">
<NavLink exact to="/resources" activeClassName="navbar-active-style">
<FormattedMessage id="resources" defaultMessage="Resources" />
</NavLink>
Expand Down Expand Up @@ -84,7 +125,7 @@ const NavDesktop = (props: NavigationProps) => {
)}

{!authed ? (
<Menu.Item key="login">
<Menu.Item key="login" className="joyride-login">
<NavLink to="/login" activeClassName="navbar-active-style">
<FormattedMessage id="login" defaultMessage="Login" />
</NavLink>
Expand All @@ -96,7 +137,7 @@ const NavDesktop = (props: NavigationProps) => {
</NavLink>
</Menu.Item>
)}
<Menu.Item key="languages">
<Menu.Item key="languages" className="joyride-translation">
<img
src="/asset/icon/globe.svg"
className="globe"
Expand Down
Loading