This is like mobile action-button

document-list-float-button.tsx

import React, { useState, useContext, useMemo } from 'react';
import styled from '@emotion/styled';
import { DocumentSelectionIcon, Approve, Reject, ArchiveIcon, RestoreIcon } from 'Icons';
import { ReferralIcon, getWord, DocumentListType } from 'edms-common';
import { Icons } from 'yeganeh-common';
import DocumentListContext from 'Document/DocumentList/DocumentListContext';
import { observer } from 'mobx-react';
import { getDashboardUrlInfo } from 'Document/DocumentList/Dashboard/utilities';
import { RouteComponentProps, withRouter } from 'react-router';
import { routeNames } from 'Routes';
import { hot } from 'react-hot-loader/root';

interface Props extends RouteComponentProps {}
const DocumentListFloatButton = (props: Props) => {
	const [isOpen, setOpen] = useState(true);
	const {
		isMultipleSelect,
		checkedDocuments,
		handleArchive,
		handleUndoArchive,
		handleUnDelete,
		handleDelete,
		documentListType,
		approveDocument,
		rejectDocument
	} = useContext(DocumentListContext);
	const dashboardUrlInfo = useMemo(() => getDashboardUrlInfo(), []);
	const handleReferral = () => {
		props.history.push(routeNames.referral.insert.fullPath.replace(':id', `${checkedDocuments[0].Id}`));
	};

	const getActionButtonsWidth = () => {
		if (documentListType === DocumentListType.Inbox || documentListType === DocumentListType.Deleted) {
			return 180;
		} else if (documentListType === DocumentListType.Archived || documentListType === DocumentListType.Draft) {
			return 120;
		} else if (dashboardUrlInfo.draft && dashboardUrlInfo.receive) {
			return 120;
		} else if (dashboardUrlInfo.referral) {
			return 120;
		} else {
			return 60;
		}
	};

	const getVisibility = () => {
		if (isMultipleSelect) {
			if (getDashboardUrlInfo().referral) {
				return checkedDocuments.length < 2;
			} else if (getDashboardUrlInfo().lending) {
				return false;
			} else {
				return true;
			}
		} else return false;
	};

	return (
		<Wrap visible={getVisibility()} isOpen={isOpen} width={getActionButtonsWidth()}>
			<Trigger
				isOpen={isOpen}
				onClick={() => {
					setOpen(!isOpen);
				}}
			>
				<DocumentSelectionIcon />
			</Trigger>
			<ActionButtonsWrap isOpen={isOpen}>
				{dashboardUrlInfo.referral && checkedDocuments.length === 1 && (
					<ActionButton
						onClick={() => {
							handleReferral();
						}}
					>
						<ReferralIcon />
					</ActionButton>
				)}
				{documentListType === DocumentListType.Inbox && (
					<ActionButton
						onClick={() => {
							handleArchive();
						}}
					>
						<ArchiveIcon />
					</ActionButton>
				)}
				{documentListType === DocumentListType.Archived && (
					<ActionButton
						onClick={() => {
							handleUndoArchive();
						}}
					>
						<RestoreIcon />
					</ActionButton>
				)}
				{documentListType === DocumentListType.Deleted && (
					<ActionButton
						onClick={() => {
							handleUnDelete();
						}}
					>
						<RestoreIcon />
					</ActionButton>
				)}
				{(documentListType === DocumentListType.Inbox ||
					documentListType === DocumentListType.Deleted ||
					documentListType === DocumentListType.Draft ||
					(dashboardUrlInfo.draft && dashboardUrlInfo.receive)) && (
					<ActionButton
						onClick={() => {
							handleDelete();
						}}
					>
						<Icons.TrashIcon />
					</ActionButton>
				)}
			</ActionButtonsWrap>
			<SeperatedActionButtonsWrap translateX={isOpen ? 80 - getActionButtonsWidth() : 10}>
				{dashboardUrlInfo.draft && dashboardUrlInfo.receive && (
					<>
						<SeperatedActionButton
							onClick={() => {
								approveDocument(checkedDocuments[0].Id);
							}}
						>
							<Approve />
						</SeperatedActionButton>
						<SeperatedActionButton
							onClick={() => {
								rejectDocument(checkedDocuments[0].Id);
							}}
						>
							<Reject />
						</SeperatedActionButton>
					</>
				)}
			</SeperatedActionButtonsWrap>
		</Wrap>
	);
};

export const Wrap = styled.div<{ visible: boolean; isOpen: boolean; width: number }>`
	visibility: ${props => (props.visible ? 'visible' : 'hidden')};
	position: fixed;
	display: flex;
	height: 60px;
	right: 20px;
	bottom: 60px;
	border-radius: 30px;
	background-color: #775f8e;
	width: ${props => (props.isOpen ? props.width : 60)}px;
	transition: width 300ms ease-out;
	.y-icon--document-selection {
		width: auto;
	}
`;

export const Trigger = styled.div<{ isOpen: boolean }>`
	position: relative;
	left: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	height: 62px;
	border-radius: 30px;
	background-color: #cccccc;
	background-image: ${props =>
		props.isOpen ? 'initial' : 'linear-gradient(221.71deg, rgba(238, 113, 129, 1) 0%, rgba(7, 88, 127, 1) 100%)'};

	box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5);
	svg {
		height: 40px;
		.svg-point {
			fill: #fff;
		}
	}
`;
export const ActionButtonsWrap = styled.div<{ isOpen: boolean }>`
	display: flex;
	flex: 1;
	align-items: center;
	transform: ${props => (props.isOpen ? 'scale(1)' : 'scale(0)')};
	transition: width 300ms ease-out, transform 300ms ease-out;
`;

export const SeperatedActionButtonsWrap = styled.div<{ translateX: number }>`
	display: flex;
	flex: 1;
	align-items: center;
	transform: translateX(${props => props.translateX}px);
	transition: transform 300ms ease-out;
`;

export const SeperatedActionButton = styled.div`
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0px 10px;
	.y-icon {
		width: 62px;
		height: 62px;
	}
`;

export const ActionButton = styled.div`
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	max-width: 50px;
	padding: 0px 5px;
	.y-icon--approve,
	.y-icon--reject {
		width: 40px;
	}
	.y-icon--refferal {
		width: 20px;
	}
	.svg-point {
		fill: #fff;
	}
	.y-icon--trash {
		width: 18px;
	}
	.y-icon--archive,
	.y-icon--restore {
		width: 22px;
	}
`;
export default hot(withRouter(observer(DocumentListFloatButton)));