feat: header component

feat: dropdown component
feat: avatar component

src/components/ui/dropdown/dropdown.module.scss

@@ -0,0 +1,117 @@
+.item {
+  all: unset;
+
+  cursor: pointer;
+  user-select: none;
+
+  position: relative;
+
+  display: flex;
+  gap: 6px;
+  align-items: center;
+
+  padding: 6px 8px;
+
+  line-height: 16px;
+
+  border-radius: 4px;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-property:
+    color,
+    background-color,
+    border-color,
+    fill,
+    stroke,
+    -webkit-text-decoration-color;
+
+  &:focus-visible {
+    background-color: var(--color-dark-100);
+    outline: none;
+  }
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.content {
+  position: relative;
+  z-index: 101;
+
+  padding: 0 4px;
+
+  background-color: var(--color-dark-700);
+  border: 1px solid var(--color-dark-500);
+  border-radius: 4px;
+
+  &[data-state='open'] {
+    animation: fade-in 300ms linear;
+  }
+
+  &[data-state='closed'] {
+    animation: fade-out 300ms linear;
+  }
+
+  .arrow {
+    position: absolute;
+    top: -3.75px;
+    right: calc(50% - 3px);
+    transform: rotate(45deg);
+
+    width: 9px;
+    height: 9px;
+
+    background-color: var(--color-dark-700);
+    border: 1px solid var(--color-dark-500);
+    border-top: none;
+    border-left: none;
+
+    stroke-width: 2px;
+  }
+}
+
+.itemsBox {
+  > :first-child {
+    margin-top: 6px;
+  }
+
+  > :last-child {
+    margin-bottom: 6px;
+  }
+}
+
+.separator {
+  height: 1px;
+  margin: 6px 0.5rem;
+  background: var(--color-dark-300);
+}
+
+.label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}