mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

make popup menu on nav bar

Browse Source
This commit is contained in:
Simon Larsen 2023-01-30 14:26:53 +00:00
parent 9904980b8f
commit fc48c308d1
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Home/views/index.ejs
View File

@ -35,7 +35,7 @@
<a href="https://github.com/oneuptime/oneuptime" target="_blank" class="inline-flex space-x-6">
<span class="rounded-full bg-indigo-600/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-600/10">Open Source</span>
<span class="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-600">
<span>Check us out on GitHub</span>
<span>Star us on GitHub</span>
<!-- Heroicon name: mini/chevron-right -->
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />

31
Home/views/nav.ejs
View File

@ -41,7 +41,7 @@
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
-->
<div class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2" id="product-menu" style="visibility: collapse;">
<div onmouseenter="showProductMenu()" onmouseover="showProductMenu()" onmouseleave="hideProductMenu()" class="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2" id="product-menu" style="visibility: collapse;">
<div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
<a href="/product/status-page" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
@ -148,7 +148,7 @@
From: "opacity-100 translate-y-0"
To: "opacity-0 translate-y-1"
-->
<div id="more-menu" class="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0" style="visibility:collapse;">
<div onmouseenter="showMoreMenu()" onmouseover="showMoreMenu()" onmouseleave="hideMoreMenu()" id="more-menu" class="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0" style="visibility:collapse;">
<div class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
<a href="/support" class="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50">
@ -320,6 +320,9 @@
<script>
let productMenuTimer = null;
let moreMenuTimer = null;
function closeMobileMenu(){
document.getElementById("mobile-menu").style.visibility = "collapse";
@ -331,24 +334,40 @@
function showProductMenu(){
document.getElementById("product-menu").style.visibility = "visible";
if(productMenuTimer){
clearInterval(productMenuTimer)
}
}
function hideProductMenu(){
setTimeout(() => {
if(productMenuTimer){
clearInterval(productMenuTimer)
}
productMenuTimer = setInterval(() => {
document.getElementById("product-menu").style.visibility = "collapse";
}, 600);
}, 500);
}
function showMoreMenu(){
document.getElementById("more-menu").style.visibility = "visible";
if(moreMenuTimer){
clearInterval(moreMenuTimer)
}
}
function hideMoreMenu(){
setTimeout(() => {
if(moreMenuTimer){
clearInterval(moreMenuTimer)
}
moreMenuTimer = setInterval(() => {
document.getElementById("more-menu").style.visibility = "collapse";
}, 600);
}, 500);
}