2020-08-29 10:19:15 +03:00
|
|
|
import {
|
|
|
|
faList as listIcon,
|
|
|
|
faLink as createIcon,
|
|
|
|
faTags as tagsIcon,
|
|
|
|
faPen as editIcon,
|
2020-12-06 20:32:24 +03:00
|
|
|
faHome as overviewIcon,
|
2021-08-20 18:30:07 +03:00
|
|
|
faGlobe as domainsIcon,
|
2020-08-29 10:19:15 +03:00
|
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
2020-11-14 00:44:26 +03:00
|
|
|
import { FC } from 'react';
|
2020-08-29 10:19:15 +03:00
|
|
|
import { NavLink, NavLinkProps } from 'react-router-dom';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Location } from 'history';
|
|
|
|
import { DeleteServerButtonProps } from '../servers/DeleteServerButton';
|
2021-08-20 18:30:07 +03:00
|
|
|
import { isServerWithId, SelectedServer } from '../servers/data';
|
|
|
|
import { supportsDomainRedirects } from '../utils/helpers/features';
|
2020-08-29 10:19:15 +03:00
|
|
|
import './AsideMenu.scss';
|
|
|
|
|
2020-08-29 11:53:02 +03:00
|
|
|
export interface AsideMenuProps {
|
2021-08-20 18:30:07 +03:00
|
|
|
selectedServer: SelectedServer;
|
2020-08-29 10:19:15 +03:00
|
|
|
className?: string;
|
|
|
|
showOnMobile?: boolean;
|
|
|
|
}
|
|
|
|
|
2020-08-29 11:53:02 +03:00
|
|
|
interface AsideMenuItemProps extends NavLinkProps {
|
2020-08-29 10:19:15 +03:00
|
|
|
to: string;
|
|
|
|
}
|
|
|
|
|
2020-08-29 11:53:02 +03:00
|
|
|
const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
|
2020-08-29 10:19:15 +03:00
|
|
|
<NavLink
|
|
|
|
className={classNames('aside-menu__item', className)}
|
|
|
|
activeClassName="aside-menu__item--selected"
|
|
|
|
to={to}
|
|
|
|
{...rest}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</NavLink>
|
|
|
|
);
|
|
|
|
|
|
|
|
const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
|
2020-12-15 19:57:24 +03:00
|
|
|
{ selectedServer, showOnMobile = false }: AsideMenuProps,
|
2020-08-29 10:19:15 +03:00
|
|
|
) => {
|
2021-11-06 14:04:26 +03:00
|
|
|
const hasId = isServerWithId(selectedServer);
|
|
|
|
const serverId = hasId ? selectedServer.id : '';
|
2021-08-20 18:30:07 +03:00
|
|
|
const addManageDomainsLink = supportsDomainRedirects(selectedServer);
|
2020-12-15 19:57:24 +03:00
|
|
|
const asideClass = classNames('aside-menu', {
|
2020-08-29 10:19:15 +03:00
|
|
|
'aside-menu--hidden': !showOnMobile,
|
|
|
|
});
|
|
|
|
const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;
|
|
|
|
const buildPath = (suffix: string) => `/server/${serverId}${suffix}`;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<aside className={asideClass}>
|
|
|
|
<nav className="nav flex-column aside-menu__nav">
|
2020-12-06 20:32:24 +03:00
|
|
|
<AsideMenuItem to={buildPath('/overview')}>
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={overviewIcon} />
|
2020-12-06 20:32:24 +03:00
|
|
|
<span className="aside-menu__item-text">Overview</span>
|
|
|
|
</AsideMenuItem>
|
2020-08-29 10:19:15 +03:00
|
|
|
<AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={listIcon} />
|
2020-08-29 10:19:15 +03:00
|
|
|
<span className="aside-menu__item-text">List short URLs</span>
|
|
|
|
</AsideMenuItem>
|
|
|
|
<AsideMenuItem to={buildPath('/create-short-url')}>
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
|
2020-08-29 10:19:15 +03:00
|
|
|
<span className="aside-menu__item-text">Create short URL</span>
|
|
|
|
</AsideMenuItem>
|
|
|
|
<AsideMenuItem to={buildPath('/manage-tags')}>
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={tagsIcon} />
|
2020-08-29 10:19:15 +03:00
|
|
|
<span className="aside-menu__item-text">Manage tags</span>
|
|
|
|
</AsideMenuItem>
|
2021-08-20 18:30:07 +03:00
|
|
|
{addManageDomainsLink && (
|
|
|
|
<AsideMenuItem to={buildPath('/manage-domains')}>
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={domainsIcon} />
|
2021-08-20 18:30:07 +03:00
|
|
|
<span className="aside-menu__item-text">Manage domains</span>
|
|
|
|
</AsideMenuItem>
|
|
|
|
)}
|
2020-08-29 10:19:15 +03:00
|
|
|
<AsideMenuItem to={buildPath('/edit')} className="aside-menu__item--push">
|
2021-09-24 20:10:03 +03:00
|
|
|
<FontAwesomeIcon fixedWidth icon={editIcon} />
|
2020-08-29 10:19:15 +03:00
|
|
|
<span className="aside-menu__item-text">Edit this server</span>
|
|
|
|
</AsideMenuItem>
|
2021-11-06 14:04:26 +03:00
|
|
|
{hasId && (
|
2021-08-20 18:30:07 +03:00
|
|
|
<DeleteServerButton
|
|
|
|
className="aside-menu__item aside-menu__item--danger"
|
|
|
|
textClassName="aside-menu__item-text"
|
|
|
|
server={selectedServer}
|
|
|
|
/>
|
|
|
|
)}
|
2020-08-29 10:19:15 +03:00
|
|
|
</nav>
|
|
|
|
</aside>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default AsideMenu;
|