initial commit

src/app/molecules/sidebar-avatar/SidebarAvatar.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './SidebarAvatar.scss';
+
+import Tippy from '@tippyjs/react';
+import Avatar from '../../atoms/avatar/Avatar';
+import Text from '../../atoms/text/Text';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import { blurOnBubbling } from '../../atoms/button/script';
+
+const SidebarAvatar = React.forwardRef(({
+  tooltip, text, bgColor, imageSrc,
+  iconSrc, active, onClick, notifyCount,
+}, ref) => {
+  let activeClass = '';
+  if (active) activeClass = ' sidebar-avatar--active';
+  return (
+    <Tippy
+      content={<Text variant="b1">{tooltip}</Text>}
+      className="sidebar-avatar-tippy"
+      touch="hold"
+      arrow={false}
+      placement="right"
+      maxWidth={200}
+      delay={[0, 0]}
+      duration={[100, 0]}
+      offset={[0, 0]}
+    >
+      <button
+        ref={ref}
+        className={`sidebar-avatar${activeClass}`}
+        type="button"
+        onMouseUp={(e) => blurOnBubbling(e, '.sidebar-avatar')}
+        onClick={onClick}
+      >
+        <Avatar
+          text={text}
+          bgColor={bgColor}
+          imageSrc={imageSrc}
+          iconSrc={iconSrc}
+          size="normal"
+        />
+        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+      </button>
+    </Tippy>
+  );
+});
+SidebarAvatar.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  iconSrc: null,
+  imageSrc: null,
+  active: false,
+  onClick: null,
+  notifyCount: null,
+};
+
+SidebarAvatar.propTypes = {
+  tooltip: PropTypes.string.isRequired,
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+  notifyCount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+export default SidebarAvatar;

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -0,0 +1,63 @@
+
+.sidebar-avatar-tippy {
+  padding: var(--sp-extra-tight) var(--sp-normal);
+  background-color: var(--bg-tooltip);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-popup);
+
+  .text {
+    color: var(--tc-tooltip);
+  }
+}
+
+.sidebar-avatar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  
+  & .notification-badge {
+    position: absolute;
+    right: var(--sp-extra-tight);
+    top: calc(-1 * var(--sp-ultra-tight));
+    box-shadow: 0 0 0 2px var(--bg-surface-low);
+  }
+  &:focus {
+    outline: none;
+  }
+  &:active .avatar-container {
+    box-shadow: var(--bs-surface-outline);
+  }
+
+  &:hover::before,
+  &:focus::before,
+  &--active::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+
+    width: 3px;
+    height: 12px;
+    background-color: var(--ic-surface-normal);
+    border-radius: 0 4px 4px 0;
+    transition: height 200ms linear;
+
+    [dir=rtl] & {
+      right: 0;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  &--active:hover::before,
+  &--active:focus::before,
+  &--active::before {
+    height: 28px;
+  }
+  &--active .avatar-container {
+    background-color: var(--bg-surface);
+  }
+}