# All files / src/Sidebar Sidebar.styles.ts

78.57% Statements 11/14
82.35% Branches 14/17
0% Functions 0/1
78.57% Lines 11/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    921x
    1x
    1x
    1x

    1x

    1x

    1x

    1x

    1x

    1x

    1x

     import styled, { css } from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const StyledSidebar = styled.div`
      background-color: ${colors.gray96};
      padding: ${spacing.lg}px 0;
      position: relative;
    `

    export const StyledSidebarButton = styled.div`
      padding: 0 ${spacing.lg}px;

      & + & {
        padding-top: ${spacing.sm}px;
      }
    `

    export const StyledSidebarDivider = styled.div`
      margin: ${spacing.xl}px;
      border-bottom: 1px solid ${colors.gray90};
      height: 1px;
    `

    export const StyledSidebarHeader = styled.div`
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 0 ${spacing.xl}px ${spacing.md}px;
    `

    export const StyledSidebarHeaderAction = styled.a`
      ${getTypographyIntent('small')}

      color: ${colors.orange50};
      cursor: pointer;
    `

    export const StyledSidebarMenu = styled.ol`
      list-style: none;
      margin: 0;
      padding: 0;
    `

    export const StyledSidebarMenuItem = styled.li<{ $active: boolean }>`
      ${getTypographyIntent('small')}
      align-items: center;
      color: ${colors.gray50};
      cursor: pointer;
      display: flex;
      position: relative;
      padding: ${spacing.sm}px ${spacing.xl}px;
      transition: all 0.2s ease-in-out;

      &::after {
        background-color: transparent;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: all 0.2s ease-in-out;
        width: 5px;
      }

      &:hover {
        background-color: ${colors.gray90};
        color: ${colors.gray15};

        &::after {
          background-color: ${colors.orange50};
        }
      }

      ${({ $active }) => {
        Iif ($active) {
          return css`
            &::after {
              background-color: ${colors.orange50};
            }
          `
        }
      }}

      &:active {
        &::after {
          background-color: ${colors.orange50};
        }
      }
    `