2021-03-03 06:10:30 +01:00
|
|
|
/* eslint-disable react/jsx-no-target-blank */
|
2021-02-05 02:06:00 +01:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import _ from 'lodash';
|
2021-02-04 04:34:23 +01:00
|
|
|
import { useRouter } from 'next/router';
|
2021-02-05 02:06:00 +01:00
|
|
|
import React, { useContext } from 'react';
|
2021-02-10 09:38:27 +01:00
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
2021-02-05 02:06:00 +01:00
|
|
|
import { v4 as uuid } from 'uuid';
|
2021-02-09 03:20:15 +01:00
|
|
|
import GithubSVG from '../../assets/svgs/socials/github.svg';
|
2021-02-22 05:12:40 +01:00
|
|
|
import RedditSVG from '../../assets/svgs/socials/reddit.svg';
|
2021-03-02 06:02:21 +01:00
|
|
|
import SessionSVG from '../../assets/svgs/socials/session.svg';
|
2021-02-09 03:20:15 +01:00
|
|
|
import TelegramSVG from '../../assets/svgs/socials/telegram.svg';
|
2021-02-05 02:06:00 +01:00
|
|
|
import TwitterSVG from '../../assets/svgs/socials/twitter.svg';
|
2021-02-22 05:12:40 +01:00
|
|
|
import YouTubeSVG from '../../assets/svgs/socials/youtube.svg';
|
2021-02-04 04:34:23 +01:00
|
|
|
import { NAVIGATION } from '../../constants';
|
2021-02-05 02:06:00 +01:00
|
|
|
import { ScreenContext } from '../../contexts/screen';
|
2021-02-10 09:38:27 +01:00
|
|
|
import { IState } from '../../state/reducers';
|
2021-02-05 02:06:00 +01:00
|
|
|
import { Contained } from '../Contained';
|
2021-02-04 06:42:15 +01:00
|
|
|
import { SideMenuRow } from './SideMenuRow';
|
2021-02-04 04:34:23 +01:00
|
|
|
|
|
|
|
export function SideMenuInner() {
|
2021-02-05 02:06:00 +01:00
|
|
|
const { isHuge, isDesktop } = useContext(ScreenContext);
|
2021-02-10 09:38:27 +01:00
|
|
|
const { pages } = useSelector((state: IState) => state.navigation);
|
2021-02-04 04:34:23 +01:00
|
|
|
const dispatch = useDispatch();
|
|
|
|
const router = useRouter();
|
|
|
|
|
2021-02-08 03:24:23 +01:00
|
|
|
const itemIsActive = (href: string) => {
|
|
|
|
return href === '/'
|
|
|
|
? // Location is at home
|
|
|
|
router.asPath === '/'
|
|
|
|
: // All other pages
|
2021-02-11 01:38:40 +01:00
|
|
|
new RegExp(`^${href}`).test(router.asPath);
|
2021-02-08 03:24:23 +01:00
|
|
|
};
|
|
|
|
|
2021-02-04 04:34:23 +01:00
|
|
|
return (
|
2021-02-05 02:06:00 +01:00
|
|
|
<div className="flex flex-col flex-grow h-full">
|
|
|
|
<div className="flex flex-col flex-grow h-full duration-300 mobile:children:last:border-b-0">
|
2021-02-11 01:38:40 +01:00
|
|
|
{Object.entries(NAVIGATION.SIDE_MENU_ITEMS).map(([key, item]) => (
|
2021-02-05 02:06:00 +01:00
|
|
|
<SideMenuRow
|
|
|
|
item={item}
|
|
|
|
key={item.label}
|
2021-02-08 03:24:23 +01:00
|
|
|
isActive={itemIsActive(item.href)}
|
2021-02-05 02:06:00 +01:00
|
|
|
/>
|
2021-02-11 01:38:40 +01:00
|
|
|
))}
|
|
|
|
{/* {Object.entries(pages ?? {}).map(([key, item]) => (
|
2021-02-10 09:38:27 +01:00
|
|
|
<SideMenuRow
|
|
|
|
item={{
|
|
|
|
id: 1,
|
|
|
|
href: slugify(item.id),
|
|
|
|
label: item.label,
|
|
|
|
}}
|
|
|
|
key={item.label}
|
|
|
|
isActive={itemIsActive(slugify(item.id))}
|
|
|
|
/>
|
2021-02-11 01:38:40 +01:00
|
|
|
))} */}
|
2021-02-05 02:06:00 +01:00
|
|
|
</div>
|
|
|
|
|
2021-02-08 07:37:50 +01:00
|
|
|
<Contained>
|
2021-02-22 05:12:40 +01:00
|
|
|
<div className="flex flex-col w-full mb-4 space-y-6">
|
2021-02-10 02:04:00 +01:00
|
|
|
{!isDesktop && (
|
2021-02-05 02:06:00 +01:00
|
|
|
<div
|
|
|
|
className={classNames(
|
2021-04-30 06:48:47 +02:00
|
|
|
'flex flex-col pt-8 pl-6 font-medium uppercase font-prompt text-lg',
|
2021-02-05 02:06:00 +01:00
|
|
|
)}
|
|
|
|
>
|
2021-02-22 05:12:40 +01:00
|
|
|
{_.chunk(NAVIGATION.MENU_ITEMS, 2).map(group => (
|
|
|
|
<div key={uuid()} className="flex space-x-4">
|
2021-02-05 02:06:00 +01:00
|
|
|
{group.map(item => (
|
2021-02-22 05:12:40 +01:00
|
|
|
<div key={item.label} className="flex-1">
|
|
|
|
<a href={item.href}>{item.label}</a>
|
|
|
|
</div>
|
2021-02-05 02:06:00 +01:00
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
2021-02-08 07:37:50 +01:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</Contained>
|
2021-02-22 01:31:49 +01:00
|
|
|
|
|
|
|
{isDesktop ? (
|
2021-02-23 23:54:39 +01:00
|
|
|
<div className="px-6 pb-3">
|
2021-02-22 01:31:49 +01:00
|
|
|
<SocialsRow />
|
2021-02-23 23:54:39 +01:00
|
|
|
|
2021-05-06 06:09:00 +02:00
|
|
|
<div className="flex items-center justify-between font-medium text-secondary whitespace-nowrap">
|
2021-02-24 00:07:24 +01:00
|
|
|
View Oxen on{' '}
|
2021-03-03 06:10:30 +01:00
|
|
|
<div className="flex items-center">
|
|
|
|
<a
|
2021-05-06 06:16:02 +02:00
|
|
|
href="https://coinmarketcap.com/currencies/oxen/"
|
2021-03-03 06:10:30 +01:00
|
|
|
target="_blank"
|
2021-04-30 09:05:32 +02:00
|
|
|
rel="nofollow"
|
2021-03-03 06:10:30 +01:00
|
|
|
className="flex items-center mx-2 space-x-1 font-bold hover:underline"
|
|
|
|
>
|
2021-05-06 06:16:02 +02:00
|
|
|
<img className="h-5" src="/img/coinmarketcap.png" />
|
|
|
|
<span>CMC</span>
|
2021-03-03 06:10:30 +01:00
|
|
|
</a>
|
2021-05-06 06:09:00 +02:00
|
|
|
<a
|
2021-05-06 06:16:02 +02:00
|
|
|
href="https://www.coingecko.com/en/coins/oxen"
|
2021-05-06 06:09:00 +02:00
|
|
|
target="_blank"
|
|
|
|
rel="nofollow"
|
|
|
|
className="flex items-center mx-2 space-x-1 font-bold hover:underline"
|
|
|
|
>
|
2021-05-06 06:16:02 +02:00
|
|
|
<img className="h-5" src="/img/coingecko.png" />
|
|
|
|
<span>CoinGecko</span>
|
2021-05-06 06:09:00 +02:00
|
|
|
</a>
|
2021-03-03 06:10:30 +01:00
|
|
|
</div>
|
2021-02-24 00:07:24 +01:00
|
|
|
</div>
|
2021-02-22 01:31:49 +01:00
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<Contained>
|
|
|
|
<SocialsRow />
|
|
|
|
</Contained>
|
|
|
|
)}
|
2021-02-04 04:34:23 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2021-02-22 01:31:49 +01:00
|
|
|
|
|
|
|
const SocialsRow = () => {
|
2021-04-30 07:05:55 +02:00
|
|
|
const { isTablet } = useContext(ScreenContext);
|
2021-02-22 05:12:40 +01:00
|
|
|
|
2021-02-22 01:31:49 +01:00
|
|
|
return (
|
2021-02-22 05:12:40 +01:00
|
|
|
<div
|
|
|
|
className={classNames(
|
2021-04-30 06:48:47 +02:00
|
|
|
'flex pt-3 pb-3',
|
2021-04-30 07:21:22 +02:00
|
|
|
isTablet ? 'justify-start space-x-5 px-6' : 'justify-between',
|
2021-02-22 05:12:40 +01:00
|
|
|
)}
|
|
|
|
>
|
2021-02-22 01:31:49 +01:00
|
|
|
<a href="https://t.me/Oxen_Community" target="_blank" rel="noreferrer">
|
2021-02-22 05:12:40 +01:00
|
|
|
<TelegramSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
2021-02-22 01:31:49 +01:00
|
|
|
</a>
|
|
|
|
<a href="https://twitter.com/Oxen_io" target="_blank" rel="noreferrer">
|
2021-02-22 05:12:40 +01:00
|
|
|
<TwitterSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
2021-02-22 01:31:49 +01:00
|
|
|
</a>
|
|
|
|
<a href="https://github.com/oxen-io" target="_blank" rel="noreferrer">
|
2021-02-22 05:12:40 +01:00
|
|
|
<GithubSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
|
|
|
</a>
|
2021-03-02 07:00:34 +01:00
|
|
|
{/* <a
|
2021-02-22 05:12:40 +01:00
|
|
|
href="https://discord.com/invite/67GXfD6"
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
|
|
|
>
|
|
|
|
<DiscordSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
2021-03-02 07:00:34 +01:00
|
|
|
</a> */}
|
2021-02-22 05:12:40 +01:00
|
|
|
<a
|
|
|
|
href="https://www.youtube.com/channel/UCN7LL0dEffQ7FSjbY5wwlnw"
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
|
|
|
>
|
|
|
|
<YouTubeSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
|
|
|
</a>
|
|
|
|
<a
|
|
|
|
href="https://www.reddit.com/r/oxen_io/"
|
|
|
|
target="_blank"
|
|
|
|
rel="noreferrer"
|
|
|
|
>
|
|
|
|
<RedditSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
2021-02-22 01:31:49 +01:00
|
|
|
</a>
|
2021-03-02 06:07:58 +01:00
|
|
|
<a href="https://loki.opensession.id/" target="_blank" rel="noreferrer">
|
2021-03-02 06:02:21 +01:00
|
|
|
<SessionSVG className="h-12 placeholder-current duration-300 border rounded-full cursor-pointer fill-current stroke-current tablet:h-10 hover:bg-primary hover:text-secondary border-primary" />
|
|
|
|
</a>
|
2021-02-22 01:31:49 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|