Something went wrong. Try again.
an app to share curated trails sidetrail.app
atproto nextjs react rsc
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105.UserMenu-loginButton { background: transparent; border: none; color: var(--text-muted); font-size: 0.75rem; text-transform: lowercase; cursor: pointer; padding: 0.25rem 0; transition: color 0.2s ease;}
.UserMenu-loginButton:hover { color: var(--text-primary);}
.UserMenu-trigger { display: block; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; overflow: hidden; cursor: pointer; background: transparent; transition: opacity 0.2s ease;}
.UserMenu-trigger:hover { opacity: 0.8;}
.UserMenu-avatar { width: 100%; height: 100%; object-fit: cover;}
.UserMenu-avatarFallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--text-muted); color: var(--bg-primary); font-size: 0.875rem; font-weight: 500;}
.UserMenu-content { min-width: 140px; background: var(--bg-primary); border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)); border-radius: 8px; padding: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 100;}
@media (prefers-color-scheme: dark) { .UserMenu-content { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }}
.UserMenu-item { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.8125rem; text-transform: lowercase; color: var(--text-primary); text-decoration: none; border-radius: 4px; cursor: pointer; transition: background 0.15s ease;}
.UserMenu-item:hover,.UserMenu-item[data-highlighted] { background: rgba(0, 0, 0, 0.05); outline: none;}
@media (prefers-color-scheme: dark) { .UserMenu-item:hover, .UserMenu-item[data-highlighted] { background: rgba(255, 255, 255, 0.08); }}
.UserMenu-separator { height: 1px; background: var(--border-color, rgba(0, 0, 0, 0.1)); margin: 0.5rem 0;}
@media (prefers-color-scheme: dark) { .UserMenu-separator { background: rgba(255, 255, 255, 0.1); }}