@cashub/ui-elv 1.0.2 → 1.0.4

package/esm/layout/Sidebar.jsx

@@ -0,0 +1,271 @@
+import { useEffect, useState, useRef } from 'react';
+import { FaCaretRight } from 'react-icons/fa/index.esm';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import styled, { css } from 'styled-components';
+import headerStyle from '../styles/config/header.style';
+import media from '../styles/mixin/media';
+import scrollbar from '../styles/mixin/scrollbar';
+import Aside from './Aside';
+import AsideHeader from './AsideHeader';
+
+const Sidebar = ({
+  theme,
+  logo,
+  hasSidebar,
+  $display,
+  toggleSidebar,
+  children,
+}) => {
+  const location = useLocation();
+  const sidebarRef = useRef(null);
+  const [hoverDisplay, setHoverDisplay] = useState(false);
+
+  const nowPath = (path) => {
+    return location.pathname.includes(path);
+  };
+
+  const handleMouseOver = () => {
+    if ($display === true) {
+      return;
+    }
+
+    setHoverDisplay(true);
+  };
+
+  const handleMouseOut = (event) => {
+    if ($display === true) {
+      return;
+    }
+
+    if (sidebarRef.current.contains(event.relatedTarget)) {
+      return;
+    }
+
+    setHoverDisplay(false);
+  };
+
+  return (
+    <>
+      <Aside
+        ref={sidebarRef}
+        $display={$display || hoverDisplay}
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
+      >
+        <AsideHeader
+          theme={theme}
+          logo={logo}
+          hasSidebar={hasSidebar}
+          toggleSidebar={toggleSidebar}
+        />
+        <Menu>
+          {children.map((prop, key) => {
+            if (prop.parent === true) {
+              return (
+                <MenuListWithSubMenu
+                  {...prop}
+                  active={nowPath(prop.path)}
+                  currentPath={location.pathname}
+                  key={key}
+                  $display={$display}
+                  hoverDisplay={hoverDisplay}
+                  level={0}
+                />
+              );
+            }
+
+            return <MenuList {...prop} active={nowPath(prop.path)} key={key} />;
+          })}
+        </Menu>
+      </Aside>
+    </>
+  );
+};
+
+const MenuList = ({ path, name, icon, active }) => {
+  const { t: trans } = useTranslation();
+
+  return (
+    <MenuItem active={active}>
+      <MenuItemLink to={path}>
+        <img
+          crossOrigin='anonymous'
+          src={icon}
+          alt={`${name} icon`}
+          width='24px'
+        />
+        <span>{trans(name)}</span>
+      </MenuItemLink>
+    </MenuItem>
+  );
+};
+
+const MenuListWithSubMenu = ({
+  path,
+  name,
+  icon,
+  child,
+  active,
+  currentPath,
+  $display,
+  hoverDisplay,
+  level,
+}) => {
+  const { t: trans } = useTranslation();
+  const [open, setOpen] = useState(active);
+
+  const toggleOpen = () => {
+    setOpen(!open);
+  };
+
+  useEffect(() => {
+    $display === false && hoverDisplay === false && setOpen(false);
+  }, [$display, hoverDisplay]);
+
+  return (
+    <>
+      <MenuItem onClick={toggleOpen}>
+        <MenuItemButton as='button' open={open} $level={level}>
+          {icon ? (
+            <img crossOrigin='anonymous' src={icon} alt={`${name} icon`} />
+          ) : (
+            <EmptyIcon />
+          )}
+          <span>{trans(name)}</span>
+          <span className='arrow' role='presentation' aria-hidden='true'>
+            <FaCaretRight />
+          </span>
+        </MenuItemButton>
+      </MenuItem>
+      <SubMenu open={open}>
+        {child
+          .filter((prop) => prop.name)
+          .map((prop, key) => {
+            const href = `${path}${prop.path}`;
+            const active = currentPath.includes(prop.path);
+
+            if (prop.parent === true) {
+              return (
+                <MenuListWithSubMenu
+                  {...prop}
+                  key={key}
+                  path={href}
+                  active={active}
+                  currentPath={currentPath}
+                  $display={$display}
+                  hoverDisplay={hoverDisplay}
+                  level={level + 1}
+                />
+              );
+            }
+
+            return (
+              <SubMenuItem key={key} active={active} $level={level}>
+                <Link to={href}>
+                  <span>{trans(prop.name)}</span>
+                </Link>
+              </SubMenuItem>
+            );
+          })}
+      </SubMenu>
+    </>
+  );
+};
+
+const Menu = styled.ul`
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+
+  span {
+    color: var(--font-on-background);
+    font-size: var(--font-body1);
+  }
+
+  li {
+    transition: 0.3s;
+
+    &:hover {
+      background: var(--color-hover);
+    }
+  }
+
+  ${scrollbar}
+
+  ${media.tablet`
+    height: calc(100% - ${headerStyle.height});
+  `};
+`;
+
+const MenuItem = styled.li`
+  ${(props) =>
+    props.active === true &&
+    css`
+      background: var(--color-active);
+    `};
+`;
+
+const MenuItemLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing);
+  height: 48px;
+
+  img {
+    width: 24px;
+    height: 24px;
+    margin-right: var(--spacing);
+    flex: 0 0 24px;
+  }
+`;
+
+const MenuItemButton = styled(MenuItemLink)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+
+  .arrow {
+    margin-left: auto;
+    color: var(--color-primary);
+
+    ${({ open }) =>
+      open === true &&
+      css`
+        transform: rotate(90deg);
+        transition: all 0.4s;
+      `};
+  }
+`;
+
+const SubMenu = styled.ul`
+  overflow: hidden;
+  height: ${(props) => (props.open === true ? 'auto' : '0px')};
+`;
+
+const SubMenuItem = styled.li`
+  a {
+    display: flex;
+    align-items: center;
+    padding: 0 calc(var(--spacing) * 2 + 1.5rem);
+    padding-left: ${({ $level }) =>
+      `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
+    height: 48px;
+
+    ${({ active }) =>
+      active === true &&
+      css`
+        background: var(--color-active);
+      `};
+  }
+`;
+
+const EmptyIcon = styled.span`
+  width: 24px;
+  height: 24px;
+  margin-right: var(--spacing);
+  flex: 0 0 24px;
+`;
+
+export default Sidebar;

package/esm/layout/index.js

@@ -0,0 +1 @@
+export { default as Layout } from './Layout';

package/esm/link/LinkSpan.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { jsx as _jsx } from "react/jsx-runtime";
+const LinkSpan = _ref => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Link, {
+    ...props,
+    children: children
+  });
+};
+const Link = styled.span.attrs(props => {
+  return {
+    fontSize: props.fontSmall ? '1rem' : '1.5rem',
+    color: props.light ? 'var(--font-on-background)' : 'rgba(255, 255, 255, 0.5)',
+    borderColor: props.light ? 'var(--border-color)' : '#3e5fff'
+  };
+})`
+  font-size: ${_ref2 => {
+  let {
+    fontSize
+  } = _ref2;
+  return fontSize;
+}};
+  line-height: 1.5;
+  font-weight: 500;
+  color: ${_ref3 => {
+  let {
+    color
+  } = _ref3;
+  return color;
+}};
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+
+  &:after {
+    display: block;
+    content: '';
+    position: absolute;
+    bottom: 0;
+    top: 1rem;
+    left: 0;
+    width: 0%;
+    transition: width 0.3s ease;
+  }
+
+  &:hover {
+    &:after {
+      width: 100%;
+      border-bottom: 1px solid ${_ref4 => {
+  let {
+    borderColor
+  } = _ref4;
+  return borderColor;
+}};
+      opacity: 0.75;
+    }
+  }
+`;
+export default LinkSpan;

package/esm/link/index.js

@@ -0,0 +1 @@
+export { default as LinkSpan } from './LinkSpan';