User Menu

userMenu.astro

---
// derivative of <Dropdown /> and <SVG />
import type { HTMLAttributes } from "astro/types";
import Dropdown from "./dropdown.astro";
import SVG from "./svg.astro";
import "./userMenu.css";

interface Props extends HTMLAttributes<"div"> {}
const { class: className, ...props } = Astro.props;
---

<Dropdown class:list={["user-menu", className]} style="--right: 0;" {...props}>
  <SVG name="user-circle" slot="button" />
  <div slot="content">
    <a href="/profile">Profile</a>
    <a href="/settings">Settings</a>
    <a href="/logout">Logout</a>
  </div>
</Dropdown>

userMenu.css

.dropdown.user-menu .dropdown-btn {
  color: var(--body-color, #fff);
  background-color: transparent;
  padding: 0;
}

.dropdown.user-menu .dropdown-content {
  float: right;
  right: var(--right, auto);
}