remove bars components

src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useCallback, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '~/components/input/Icon';
+import { Dialog } from '~/constants/modal';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+
+import styles from './styles.module.scss';
+
+export interface SubmitBarProps {
+  isLab?: boolean;
+}
+
+const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => {
+  const showModal = useShowModal(Dialog.CreateNode);
+  const [focused, setFocused] = useState(false);
+
+  const onFocus = useCallback(() => setFocused(true), [setFocused]);
+  const onBlur = useCallback(() => setFocused(false), [setFocused]);
+
+  const createUrl = useCallback(
+    (type: string) => () => {
+      showModal({ type, isInLab: !!isLab });
+    },
+    [isLab, showModal]
+  );
+
+  const icon = isLab ? 'lab' : 'plus';
+
+  return (
+    <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
+      <div className={classNames(styles.panel, { [styles.active]: focused })}>
+        <button onClick={createUrl('image')} className={styles.link}>
+          <Icon icon="image" size={32} />
+        </button>
+
+        <button onClick={createUrl('text')} className={styles.link}>
+          <Icon icon="text" size={32} />
+        </button>
+
+        <button onClick={createUrl('video')} className={styles.link}>
+          <Icon icon="video" size={32} />
+        </button>
+
+        <button onClick={createUrl('audio')} className={styles.link}>
+          <Icon icon="audio" size={32} />
+        </button>
+      </div>
+
+      <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">
+        <Icon icon={icon} />
+      </button>
+    </div>
+  );
+};
+
+export { SubmitBar };

src/containers/main/SubmitBarRouter/components/SubmitBar/ssr.ts

@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic';
+
+import type { SubmitBarProps } from './index';
+
+export const SubmitBarSSR = dynamic<SubmitBarProps>(
+  () => import('./index').then(it => it.SubmitBar),
+  { ssr: false });

src/containers/main/SubmitBarRouter/components/SubmitBar/styles.module.scss

@@ -0,0 +1,77 @@
+@import 'src/styles/variables';
+
+.wrap {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate($content_width * 0.5 + $gap, 0);
+  z-index: 14;
+
+  @media (max-width: $content_width + ($bar_height + $gap) * 2) {
+    left: 100%;
+    transform: translate(-$bar_height, 0);
+  }
+}
+
+.button {
+  background: $flow_gradient;
+  width: $bar_height;
+  height: $bar_height;
+  border-radius: $bar_height * 0.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius $radius 0 0;
+  cursor: pointer;
+  position: relative;
+  z-index: 2;
+  border: none;
+  outline: none;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .lab & {
+    background: $info_gradient;
+  }
+}
+
+.panel {
+  background: $content_bg_lighter;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  padding-bottom: $bar_height;
+  border-radius: $radius $radius 0 0;
+  transform: translate(0, 100%);
+  transition: transform 250ms 250ms;
+
+  &.active {
+    transform: translate(0, 0);
+    transition: transform 250ms;
+  }
+}
+
+.link {
+  @include row_shadow;
+
+  height: $bar_height;
+  width: $bar_height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  fill: white;
+  color: white;
+
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  &:first-child {
+    border-radius: $radius $radius 0 0;
+  }
+}

src/containers/main/SubmitBarRouter/index.tsx

@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
 
-import { SubmitBarSSR } from '~/components/bars/SubmitBar/ssr';
 import { Authorized } from '~/components/containers/Authorized';
 
+import { SubmitBarSSR } from './components/SubmitBar/ssr';
+
 interface IProps {
   prefix?: string;
   isLab?: boolean;