API tools faq
paste
Guest User

Hero Widget | Menu suggestion

a guest
Nov 30th, 2025
21
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.29 KB | Source Code | 0 0
raw download clone embed print report
  1. @@
  2. -      <div class="mb-8 flex items-center justify-between"><div><h1 class="text-4xl font-bold tracking-tight text-foreground mb-2">Your Metrics Widget</h1><p class="text-muted-foreground">Manage and embed your metrics</p></div><div class="flex gap-2"><a href="/admin"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Manage Metrics</button></a><a href="mailto:[email protected]" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>Help</a><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out mr-2 h-4 w-4"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" x2="9" y1="12" y2="12"></line></svg>Sign Out</button></div></div>
  3. +      <div class="mb-8 flex items-center justify-between">
  4. +        <div>
  5. +          <h1 class="text-4xl font-bold tracking-tight text-foreground mb-2">Your Metrics Widget</h1>
  6. +          <p class="text-muted-foreground">Manage and embed your metrics</p>
  7. +        </div>
  8. +
  9. +        <!-- Desktop actions -->
  10. +        <div class="hidden md:flex gap-2">
  11. +          <a href="/admin">
  12. +            <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
  13. +              Manage Metrics
  14. +            </button>
  15. +          </a>
  16. +          <a
  17. +            href="mailto:[email protected]"
  18. +            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
  19. +          >
  20. +            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail mr-2 h-4 w-4">
  21. +              <rect width="20" height="16" x="2" y="4" rx="2"></rect>
  22. +              <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
  23. +            </svg>
  24. +            Help
  25. +          </a>
  26. +          <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
  27. +            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out mr-2 h-4 w-4">
  28. +              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
  29. +              <polyline points="16 17 21 12 16 7"></polyline>
  30. +              <line x1="21" x2="9" y1="12" y2="12"></line>
  31. +            </svg>
  32. +            Sign Out
  33. +          </button>
  34. +        </div>
  35. +
  36. +        <!-- Mobile hamburger -->
  37. +        <button
  38. +          type="button"
  39. +          id="mobile-menu-button"
  40. +          class="md:hidden inline-flex items-center justify-center rounded-md border border-input bg-background p-2 text-foreground hover:bg-accent hover:text-accent-foreground"
  41. +          aria-label="Open menu"
  42. +        >
  43. +          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-5 w-5">
  44. +            <line x1="4" x2="20" y1="6" y2="6"></line>
  45. +            <line x1="4" x2="20" y1="12" y2="12"></line>
  46. +            <line x1="4" x2="20" y1="18" y2="18"></line>
  47. +          </svg>
  48. +        </button>
  49. +      </div>
  50. +
  51. +      <!-- Mobile drawer -->
  52. +      <div
  53. +        id="mobile-menu-backdrop"
  54. +        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm hidden md:hidden"
  55. +      >
  56. +        <div
  57. +          id="mobile-menu-drawer"
  58. +          class="fixed inset-y-0 right-0 z-50 w-64 bg-background border-l shadow-lg px-4 py-6 flex flex-col gap-3 translate-x-full transition-transform"
  59. +        >
  60. +          <div class="flex items-center justify-between mb-4">
  61. +            <span class="text-sm font-medium text-muted-foreground">Menu</span>
  62. +            <button
  63. +              type="button"
  64. +              class="inline-flex items-center justify-center rounded-md border border-input bg-background p-1 text-foreground hover:bg-accent hover:text-accent-foreground"
  65. +              data-mobile-menu-close
  66. +              aria-label="Close menu"
  67. +            >
  68. +              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x h-4 w-4">
  69. +                <line x1="18" y1="6" x2="6" y2="18"></line>
  70. +                <line x1="6" y1="6" x2="18" y2="18"></line>
  71. +              </svg>
  72. +            </button>
  73. +          </div>
  74. +
  75. +          <a
  76. +            href="/admin"
  77. +            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
  78. +          >
  79. +            <span>Manage Metrics</span>
  80. +          </a>
  81. +
  82. +          <a
  83. +            href="mailto:[email protected]"
  84. +            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
  85. +          >
  86. +            <span>Help</span>
  87. +          </a>
  88. +
  89. +          <button
  90. +            type="button"
  91. +            class="inline-flex items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
  92. +          >
  93. +            <span>Sign Out</span>
  94. +          </button>
  95. +        </div>
  96. +      </div>
  97. @@
  98. -  </body></html>
  99. +  <script>
  100. +    document.addEventListener("DOMContentLoaded", function () {
  101. +      const button = document.getElementById("mobile-menu-button");
  102. +      const backdrop = document.getElementById("mobile-menu-backdrop");
  103. +      const drawer = document.getElementById("mobile-menu-drawer");
  104. +      const closeButtons = document.querySelectorAll("[data-mobile-menu-close]");
  105. +
  106. +      if (!button || !backdrop || !drawer) return;
  107. +
  108. +      function openMenu() {
  109. +        backdrop.classList.remove("hidden");
  110. +        drawer.classList.remove("translate-x-full");
  111. +      }
  112. +
  113. +      function closeMenu() {
  114. +        drawer.classList.add("translate-x-full");
  115. +        backdrop.classList.add("hidden");
  116. +      }
  117. +
  118. +      button.addEventListener("click", openMenu);
  119. +      backdrop.addEventListener("click", function (event) {
  120. +        if (event.target === backdrop) {
  121. +          closeMenu();
  122. +        }
  123. +      });
  124. +
  125. +      closeButtons.forEach(function (btn) {
  126. +        btn.addEventListener("click", closeMenu);
  127. +      });
  128. +    });
  129. +  </script>
  130. +</body></html>
  131.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!