diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css index 1b84eba..ea73dfd 100644 --- a/assets/css/admin/components.css +++ b/assets/css/admin/components.css @@ -3286,6 +3286,35 @@ border-top: 1px solid var(--t-border-default); } +/* Dev tools disclosure in sidebar footer */ +.admin-dev-tools { + & > summary { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + color: var(--t-text-secondary); + cursor: pointer; + list-style: none; + + &::marker, &::-webkit-details-marker { display: none; } + } + + & > summary:hover { color: var(--t-text-primary); } + + & .admin-dev-tools-chevron { + margin-left: auto; + transition: transform 0.15s ease; + } + + &[open] .admin-dev-tools-chevron { transform: rotate(90deg); } + + & > .admin-nav { + padding-left: 1rem; + } +} + /* Sidebar nav area */ .admin-sidebar-nav { flex: 1; diff --git a/assets/css/admin/icons.css b/assets/css/admin/icons.css index b6c7058..904b49d 100644 --- a/assets/css/admin/icons.css +++ b/assets/css/admin/icons.css @@ -1166,6 +1166,18 @@ height: 1.5rem; } +.hero-wrench-screwdriver { + --hero-wrench-screwdriver: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-wrench-screwdriver); + mask: var(--hero-wrench-screwdriver); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + .hero-x-circle { --hero-x-circle: url('data:image/svg+xml;utf8,%20%20'); -webkit-mask: var(--hero-x-circle); diff --git a/lib/berrypod_web/components/layouts/admin.html.heex b/lib/berrypod_web/components/layouts/admin.html.heex index d2ad7a5..b605444 100644 --- a/lib/berrypod_web/components/layouts/admin.html.heex +++ b/lib/berrypod_web/components/layouts/admin.html.heex @@ -199,19 +199,29 @@
  • - <.link href={~p"/admin/dashboard"}> - <.icon name="hero-chart-bar" class="size-5" /> LiveDashboard - -
  • -
  • - <.link href={~p"/admin/errors"}> - <.icon name="hero-bug-ant" class="size-5" /> Errors - -
  • -
  • - <.link href={~p"/admin/oban"}> - <.icon name="hero-queue-list" class="size-5" /> Jobs - +
    + + <.icon name="hero-wrench-screwdriver" class="size-5" /> Developer tools + <.icon name="hero-chevron-right" class="size-4 admin-dev-tools-chevron" /> + +
      +
    • + <.link href={~p"/admin/dashboard"}> + <.icon name="hero-chart-bar" class="size-5" /> LiveDashboard + +
    • +
    • + <.link href={~p"/admin/errors"}> + <.icon name="hero-bug-ant" class="size-5" /> Errors + +
    • +
    • + <.link href={~p"/admin/oban"}> + <.icon name="hero-queue-list" class="size-5" /> Jobs + +
    • +
    +
  • <.link href={~p"/users/log-out"} method="delete">