@sinchsmb/ui-kit/src/layout/NavigationBar/components/NavigationBarPanel/styled.ts

UI kit for SinchSMB frontend

import styled, { keyframes } from 'styled-components/macro';

import { ZIndex } from '../../../../constans/zIndex';
import { PropsWithTheme, color, other, shadow } from '../../../../theme';

const left = 86;
const width = 220;

export const animationDuration = 400;

const showAnimation = (props: PropsWithTheme) => keyframes`
  0% {
    box-shadow: ${shadow('sys/shadow/elevation/0')(props)};
    left: ${left - width}px;
    opacity: 0;
  }
  30% {
    box-shadow: ${shadow('sys/shadow/elevation/16')(props)};
    opacity: 1;
  }
  100% {
    box-shadow: ${shadow('sys/shadow/elevation/16')(props)};
    left: ${left}px;
    opacity: 1;
  }
`;

const hideAnimation = (props: PropsWithTheme) => keyframes`
  0% {
    box-shadow: ${shadow('sys/shadow/elevation/16')(props)};
    left: ${left}px;
    opacity: 1;
  }
  70% {
    box-shadow: ${shadow('sys/shadow/elevation/0')(props)};
    opacity: 1;
  }
  100% {
    box-shadow: ${shadow('sys/shadow/elevation/0')(props)};
    left: ${left - width}px;
    opacity: 0;
  }
`;

export const StyledPanel = styled.div`
  animation-duration: ${animationDuration}ms;
  animation-timing-function: ${other('sys/timing-function/smooth')};
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.9);
  border-right: 1px solid ${color('sys/color/divider')};
  box-shadow: ${shadow('sys/shadow/elevation/0')};
  box-sizing: border-box;
  inset: 0;
  left: ${left - width}px;
  opacity: 0;
  position: absolute;
  width: ${width}px;
  z-index: ${ZIndex.MenuBar - 1};

  &.enter-active {
    animation-name: ${showAnimation};
  }

  &.enter-done {
    box-shadow: ${shadow('sys/shadow/elevation/16')};
    left: ${left}px;
    opacity: 1;
  }

  &.exit-active {
    animation-name: ${hideAnimation};
    animation-timing-function: ease-in-out;
  }
`;