add profile menu

css/components.css

@@ -391,7 +391,7 @@ app-shell main {
 
 .dropdown-menu {
     position: absolute;
-    top: 100%;
+    top: 45px;
     right: 0;
     min-width: 150px;
     background-color: var(--color-bg);
@@ -413,12 +413,20 @@ app-shell main {
 }
 
 .dropdown-item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
     width: 100%;
     padding: var(--space-sm) var(--space-md);
     text-align: left;
     border-radius: var(--radius-sm);
     color: var(--color-text);
+    background: none;
+    border: none;
+    font-size: inherit;
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
 }
 
 .dropdown-item:hover {
@@ -429,3 +437,32 @@ app-shell main {
     background-color: var(--color-primary-light);
     color: var(--color-primary);
 }
+
+.dropdown-item svg {
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+
+.dropdown-item-danger {
+    color: var(--color-error);
+}
+
+.dropdown-item-danger:hover {
+    background-color: var(--color-error);
+    color: white;
+}
+
+.dropdown-item-danger:hover svg {
+    opacity: 1;
+}
+
+.dropdown-divider {
+    height: 1px;
+    background-color: var(--color-border);
+    margin: var(--space-xs) 0;
+}
+
+.dropdown-menu-right {
+    right: 0;
+    left: auto;
+}