Move some modules from src to shlink-web-component

shlink-web-component/common/AsideMenu.scss

@@ -0,0 +1,63 @@
+@import '../../src/utils/base';
+@import '../../src/utils/mixins/vertical-align';
+
+.aside-menu {
+  width: $asideMenuWidth;
+  background-color: var(--primary-color);
+  box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
+  position: fixed !important;
+  padding-top: 13px;
+  padding-bottom: 10px;
+  top: $headerHeight;
+  bottom: 0;
+  left: 0;
+  display: block;
+  z-index: 1010;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  @media (min-width: $mdMin) {
+    padding: 30px 15px 15px;
+  }
+
+  @media (max-width: $smMax) {
+    transition: left 300ms;
+    top: $headerHeight - 3px;
+    box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
+  }
+}
+
+.aside-menu--hidden {
+  @media (max-width: $smMax) {
+    left: -($asideMenuWidth + 35px);
+  }
+}
+
+.aside-menu__nav {
+  height: 100%;
+}
+
+.aside-menu__item {
+  padding: 10px 20px;
+  margin: 0 -15px;
+  text-decoration: none !important;
+  cursor: pointer;
+
+  @media (max-width: $smMax) {
+    margin: 0;
+  }
+}
+
+.aside-menu__item:hover {
+  background-color: var(--secondary-color);
+}
+
+.aside-menu__item--selected,
+.aside-menu__item--selected:hover {
+  color: #ffffff;
+  background-color: var(--brand-color);
+}
+
+.aside-menu__item-text {
+  margin-left: 8px;
+}

shlink-web-component/common/AsideMenu.tsx

@@ -0,0 +1,71 @@
+import {
+  faGlobe as domainsIcon,
+  faHome as overviewIcon,
+  faLink as createIcon,
+  faList as listIcon,
+  faTags as tagsIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import type { NavLinkProps } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
+import './AsideMenu.scss';
+
+export interface AsideMenuProps {
+  routePrefix: string;
+  showOnMobile?: boolean;
+}
+
+interface AsideMenuItemProps extends NavLinkProps {
+  to: string;
+  className?: string;
+}
+
+const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
+  <NavLink
+    className={({ isActive }) => classNames('aside-menu__item', className, { 'aside-menu__item--selected': isActive })}
+    to={to}
+    {...rest}
+  >
+    {children}
+  </NavLink>
+);
+
+export const AsideMenu: FC<AsideMenuProps> = ({ routePrefix, showOnMobile = false }) => {
+  const { pathname } = useLocation();
+  const asideClass = classNames('aside-menu', {
+    'aside-menu--hidden': !showOnMobile,
+  });
+  const buildPath = (suffix: string) => `${routePrefix}${suffix}`;
+
+  return (
+    <aside className={asideClass}>
+      <nav className="nav flex-column aside-menu__nav">
+        <AsideMenuItem to={buildPath('/overview')}>
+          <FontAwesomeIcon fixedWidth icon={overviewIcon} />
+          <span className="aside-menu__item-text">Overview</span>
+        </AsideMenuItem>
+        <AsideMenuItem
+          to={buildPath('/list-short-urls/1')}
+          className={classNames({ 'aside-menu__item--selected': pathname.match('/list-short-urls') !== null })}
+        >
+          <FontAwesomeIcon fixedWidth icon={listIcon} />
+          <span className="aside-menu__item-text">List short URLs</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/create-short-url')}>
+          <FontAwesomeIcon fixedWidth icon={createIcon} flip="horizontal" />
+          <span className="aside-menu__item-text">Create short URL</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/manage-tags')}>
+          <FontAwesomeIcon fixedWidth icon={tagsIcon} />
+          <span className="aside-menu__item-text">Manage tags</span>
+        </AsideMenuItem>
+        <AsideMenuItem to={buildPath('/manage-domains')}>
+          <FontAwesomeIcon fixedWidth icon={domainsIcon} />
+          <span className="aside-menu__item-text">Manage domains</span>
+        </AsideMenuItem>
+      </nav>
+    </aside>
+  );
+};