side-nav.component.scss 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. @mixin sid-nav-theme() {
  2. app-side-nav {
  3. nav {
  4. // width: 100px;
  5. height: 100%;
  6. background-color: $main-color;
  7. // border-radius: 20px;
  8. padding-top: 10px;
  9. position: relative;
  10. ul {
  11. list-style: none;
  12. color: $white-color;
  13. padding: 20px 20px;
  14. margin-top: 2rem;
  15. li {
  16. border-bottom: 1px solid $white-color;
  17. width: 100%;
  18. padding-bottom: 10px;
  19. cursor: pointer;
  20. &:hover {
  21. color: $light-blue;
  22. }
  23. &:last-child {
  24. border-bottom: 0;
  25. }
  26. a {
  27. color: $white-color;
  28. text-decoration: none;
  29. transition: all 0.5s;
  30. &:hover {
  31. color: $light-blue;
  32. }
  33. }
  34. span {
  35. font-size: 15px;
  36. }
  37. }
  38. }
  39. .active {
  40. color: $light-blue;
  41. }
  42. .nav-img {
  43. width: 20px;
  44. height: 20px;
  45. object-fit: cover;
  46. cursor: pointer;
  47. }
  48. }
  49. }
  50. }