sidebar.scss

@import '../../resources/variables';

.hideOnMobile {
  display: none;
}

@media only screen and (width >= 768px) {
  .hideOnMobile {
    display: block;
  }
}

.hideOnDesktop {
  display: block;
}

@media only screen and (width >= 768px) {
  .hideOnDesktop {
    display: none;
  }
}

.sidebar-logo {
  color: black;
  font-weight: 400;
  line-height: 0.9em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px;

  span {
    margin-right: 25%;
  }

  svg {
    padding: 0 8px;

    .st0 {
      fill: none;
      stroke: #000;
      stroke-width: 23;
      stroke-miterlimit: 10;
    }

    path {
      stroke-dasharray: 1720;
      stroke-dashoffset: 1720;
      animation: dash 0.8s linear forwards;
    }

    circle {
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
      animation: dash 1s linear forwards;
      animation-delay: 0.5s;
    }
  }

  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }
}

.sidebar-logo.dark {
  color: white;

  svg {
    padding: 0 8px;

    .st0 {
      fill: none;
      stroke: white;
      stroke-width: 23;
      stroke-miterlimit: 10;
    }

    path {
      stroke-dasharray: 1720;
      stroke-dashoffset: 1720;
    }

    circle {
      fill: white;
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
    }
  }
}

.sidebar-logo-collapsed {
  position: relative;
  margin: 20px auto;
  text-align: center;
  font-size: 22px;
  border-top: 6px solid gray;
  border-bottom: 8px solid gray;
  padding-bottom: 0;
  line-height: 25px;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
}

.sidebar-divider {
  height: 1px;
  background-color: #ccc;
  margin: 8px 0;
}