<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cyber Stock</title> <!-- Dynamic title -->
  <link rel="manifest" href="/manifest.json">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/gg.css">
</head>
<body>


   
    <% if(currentPage!='forgot-password-page'&&currentPage!='reset-password-page'&&currentPage!='register') { %> 

  <%- include('topnav') %>
  <%- include('sidebar') %> 
  <%   } %> 

  <div id="parent-container" class="parent-container">

    <% if (currentPage === 'hh') { %>
        <%- include('new-transaction') %>
    <% } else { %>
        <!-- Add alternative content or leave empty -->


        <% try { %>
            <%- include(currentPage) %>
        <% } catch (err) { %>
            <p>Page not found.</p>
        <% } %>
    <% } %>
    
 



  </div>


  <% if(currentPage!='forgot-password-page'&&currentPage!='reset-password-page'&&currentPage!='register') { %> 


 
  <script>
  
  
  let deferredPrompt;
      let wakeLock = null;
      let registration;


console.log("🚀 Checking if navigator is supported...");
console.log("navigator:", navigator);

if ('serviceWorker' in navigator) {
  console.log("✅ Service Worker is supported!");
} else {
  console.error("❌ Service Worker is NOT supported.");
}




      if ('serviceWorker' in navigator) {
        
          navigator.serviceWorker.register('/service-worker.js').then(reg => {
              console.log("✅ Service Worker Registered");
              registration = reg;
          }).catch(error => console.error("❌ Service Worker Registration Failed:", error));
      }

      
 
    document.addEventListener('DOMContentLoaded', () => {
      const toggleButton = document.querySelector('.toggle-sidebar-btn');
      const sidebar = document.getElementById('sidebar');
      const mainContent = document.querySelector('.parent-container');
  
      toggleButton.addEventListener('click', () => {
      if (sidebar.classList.contains('collapsed')) {
          sidebar.classList.remove('collapsed'); // Show the sidebar
          sidebar.classList.add('expanded'); // Show the sidebar
          mainContent.classList.remove('collapsed'); // Adjust main-content layout
      } else {
          sidebar.classList.add('collapsed'); // Hide the sidebar
          mainContent.classList.add('collapsed'); // Adjust main-content layout
          sidebar.classList.remove('expanded');
        }
  });
  
  
  
  


// Function to toggle sidebar state
function toggleSidebar(action) {
    if (action === 'collapse') {
        sidebar.classList.add('collapsed');
        mainContent.classList.add('collapsed');
        sidebar.classList.remove('expanded');
    } else if (action === 'expand') {
        sidebar.classList.remove('collapsed');
        mainContent.classList.remove('collapsed');
        sidebar.classList.add('expanded');
    }
}

  


    // Check screen size and add 'collapsed' class for mobile
    if (window.innerWidth <= 768) {
        sidebar.classList.add('collapsed');




     // Add event listener to hide sidebar when clicking outside of it
     document.addEventListener('click', (event) => {
        const isClickInsideSidebar = sidebar.contains(event.target);
        const isClickOnToggleButton = toggleButton.contains(event.target);

        // If the click is outside both the sidebar and the toggle button, collapse the sidebar
        if (!isClickInsideSidebar && !isClickOnToggleButton&&window.innerWidth <= 768) {
            sidebar.classList.add('collapsed');
            sidebar.classList.remove('expanded');
        }
    });
  



    }

    // Optional: Adjust on window resize
    window.addEventListener('resize', () => {
        if (window.innerWidth <= 768) {
            sidebar.classList.add('collapsed');
        } else {
            sidebar.classList.remove('collapsed');
        }
    });

  
  
  });
  </script>

<%   } %> 


</body>
</html>