doxygen: mobile styling

Doxyfile

@@ -42,15 +42,19 @@ EXTRACT_LOCAL_CLASSES  = NO
 GENERATE_HTML          = YES
 HTML_OUTPUT            = zig-out/share/ghostty/doc/libghostty
 HTML_EXTRA_STYLESHEET  = dist/doxygen/ghostty.css
-HTML_EXTRA_FILES       = dist/doxygen/favicon.png
+HTML_EXTRA_FILES       = dist/doxygen/favicon.png \
+                         dist/doxygen/mobile-nav.js
 HTML_COLORSTYLE        = DARK
 HTML_CODE_FOLDING      = NO
+HTML_HEADER            = dist/doxygen/header.html
 LAYOUT_FILE            = DoxygenLayout.xml
 GENERATE_TREEVIEW      = YES
 HTML_DYNAMIC_SECTIONS  = YES
 SEARCHENGINE           = YES
 ALPHABETICAL_INDEX     = YES
 HTML_TIMESTAMP         = NO
+DISABLE_INDEX          = NO
+FULL_SIDEBAR           = NO
 
 #---------------------------------------------------------------------------
 # Graphs and Diagrams

dist/doxygen/footer.html

@@ -0,0 +1,18 @@
+<!-- HTML footer for doxygen 1.14.0-->
+<!-- start footer part -->
+<!--BEGIN GENERATE_TREEVIEW-->
+<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
+  <ul>
+    $navpath
+    <li class="footer">$generatedby <a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion </li>
+  </ul>
+</div>
+<!--END GENERATE_TREEVIEW-->
+<!--BEGIN !GENERATE_TREEVIEW-->
+<hr class="footer"/><address class="footer"><small>
+$generatedby&#160;<a href="https://www.doxygen.org/index.html"><img class="footer" src="$relpath^doxygen.svg" width="104" height="31" alt="doxygen"/></a> $doxygenversion
+</small></address>
+</div><!-- doc-content -->
+<!--END !GENERATE_TREEVIEW-->
+</body>
+</html>

dist/doxygen/ghostty.css

@@ -116,3 +116,225 @@ span.lineno a {
   color: #8a8a8a !important;
   background-color: transparent !important;
 }
+
+/* Desktop: ensure page-nav maintains default width */
+@media screen and (min-width: 768px) {
+  #page-nav-toggle {
+    display: none !important;
+  }
+  
+  #page-nav {
+    position: relative !important;
+    width: 250px !important;
+    height: auto !important;
+    right: auto !important;
+    top: auto !important;
+    box-shadow: none !important;
+  }
+}
+
+/* Mobile-friendly responsive styles */
+@media screen and (max-width: 767px) {
+  body {
+    font-size: 14px !important;
+  }
+  
+  /* Make navigation tree collapsible on mobile */
+  #side-nav {
+    display: none;
+  }
+  
+  #doc-content {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  
+  /* Make right sidebar (page-nav) overlay on mobile */
+  #page-nav {
+    position: fixed !important;
+    top: 0 !important;
+    right: -280px !important;
+    width: 280px !important;
+    height: 100vh !important;
+    z-index: 10000 !important;
+    background: #101826 !important;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5) !important;
+    transition: right 0.3s ease !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  
+  #page-nav.mobile-open {
+    right: 0 !important;
+  }
+  
+  /* Hamburger menu button for page nav */
+  #page-nav-toggle {
+    display: block !important;
+    position: fixed !important;
+    top: 10px !important;
+    right: 15px !important;
+    z-index: 10001 !important;
+    width: 40px !important;
+    height: 40px !important;
+    background: rgba(53, 81, 243, 0.9) !important;
+    border: none !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    padding: 8px !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
+  }
+  
+  #page-nav-toggle span {
+    display: block !important;
+    width: 24px !important;
+    height: 3px !important;
+    background: #fff !important;
+    margin: 4px 0 !important;
+    border-radius: 2px !important;
+    transition: 0.3s !important;
+  }
+  
+  /* Mobile overlay backdrop */
+  #page-nav-backdrop {
+    display: none !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    background: rgba(0, 0, 0, 0.5) !important;
+    z-index: 9999 !important;
+  }
+  
+  #page-nav-backdrop.active {
+    display: block !important;
+  }
+  
+  /* Improve header and navigation */
+  #top {
+    height: auto !important;
+  }
+  
+  #titlearea {
+    padding: 10px !important;
+  }
+  
+  #projectname {
+    font-size: 18px !important;
+  }
+  
+  #projectbrief,
+  #projectnumber {
+    font-size: 12px !important;
+  }
+  
+  /* Make tabs stack better on mobile */
+  #navrow1,
+  #navrow2,
+  #navrow3,
+  #navrow4 {
+    overflow-x: auto !important;
+    white-space: nowrap !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  
+  .tablist li {
+    display: inline-block !important;
+  }
+  
+  /* Content adjustments */
+  .contents {
+    padding: 10px !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  
+  .header {
+    padding: 5px !important;
+  }
+  
+  /* Code blocks */
+  .fragment {
+    font-size: 12px !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+  }
+  
+  div.line {
+    font-size: 12px !important;
+  }
+  
+  /* Tables */
+  table {
+    display: block !important;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch !important;
+    width: 100% !important;
+  }
+  
+  .memberdecls table,
+  .fieldtable {
+    font-size: 12px !important;
+  }
+  
+  .memtitle {
+    font-size: 14px !important;
+    padding: 8px !important;
+  }
+  
+  .memname {
+    font-size: 13px !important;
+    word-break: break-word !important;
+  }
+  
+  .memitem {
+    margin: 5px 0 !important;
+  }
+  
+  /* Search box */
+  #MSearchBox {
+    width: 100% !important;
+    right: 0 !important;
+  }
+  
+  /* Reduce padding and margins */
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 10px !important;
+    margin-bottom: 8px !important;
+  }
+  
+  h1 { font-size: 22px !important; }
+  h2 { font-size: 18px !important; }
+  h3 { font-size: 16px !important; }
+  h4 { font-size: 14px !important; }
+  
+  /* Directory/file listings */
+  .directory .levels span {
+    display: none !important;
+  }
+  
+  .directory .arrow {
+    margin-right: 5px !important;
+  }
+  
+  /* Treeview adjustments */
+  #nav-tree {
+    width: 100% !important;
+  }
+}
+
+/* Tablet adjustments */
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  .contents {
+    padding: 15px !important;
+  }
+  
+  #side-nav {
+    width: 200px !important;
+  }
+  
+  #doc-content {
+    margin-left: 200px !important;
+  }
+}

dist/doxygen/header.html

@@ -0,0 +1,77 @@
+<!-- HTML header for doxygen 1.14.0-->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="$langISO">
+<head>
+<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
+<meta http-equiv="X-UA-Compatible" content="IE=11"/>
+<meta name="generator" content="Doxygen $doxygenversion"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<!--BEGIN PROJECT_NAME--><title>$projectname: $title</title><!--END PROJECT_NAME-->
+<!--BEGIN !PROJECT_NAME--><title>$title</title><!--END !PROJECT_NAME-->
+<!--BEGIN PROJECT_ICON-->
+<link rel="icon" href="$relpath^$projecticon" type="image/x-icon" />
+<!--END PROJECT_ICON-->
+<link href="$relpath^tabs.css" rel="stylesheet" type="text/css"/>
+<!--BEGIN FULL_SIDEBAR-->
+<script type="text/javascript">var page_layout=1;</script>
+<!--END FULL_SIDEBAR-->
+<script type="text/javascript" src="$relpath^jquery.js"></script>
+<script type="text/javascript" src="$relpath^dynsections.js"></script>
+<!--BEGIN COPY_CLIPBOARD-->
+<script type="text/javascript" src="$relpath^clipboard.js"></script>
+<!--END COPY_CLIPBOARD-->
+$treeview
+$search
+$mathjax
+$darkmode
+<link href="$relpath^$stylesheet" rel="stylesheet" type="text/css" />
+$extrastylesheet
+<script type="text/javascript" src="$relpath^mobile-nav.js"></script>
+</head>
+<body>
+<!--BEGIN FULL_SIDEBAR-->
+<div id="side-nav" class="ui-resizable side-nav-resizable"><!-- do not remove this div, it is closed by doxygen! -->
+<!--END FULL_SIDEBAR-->
+
+<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
+
+<!--BEGIN TITLEAREA-->
+<div id="titlearea">
+<table cellspacing="0" cellpadding="0">
+ <tbody>
+ <tr id="projectrow">
+  <!--BEGIN PROJECT_LOGO-->
+  <td id="projectlogo"><img alt="Logo" src="$relpath^$projectlogo"$logosize/></td>
+  <!--END PROJECT_LOGO-->
+  <!--BEGIN PROJECT_NAME-->
+  <td id="projectalign">
+   <div id="projectname">$projectname<!--BEGIN PROJECT_NUMBER--><span id="projectnumber">&#160;$projectnumber</span><!--END PROJECT_NUMBER-->
+   </div>
+   <!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
+  </td>
+  <!--END PROJECT_NAME-->
+  <!--BEGIN !PROJECT_NAME-->
+   <!--BEGIN PROJECT_BRIEF-->
+    <td>
+    <div id="projectbrief">$projectbrief</div>
+    </td>
+   <!--END PROJECT_BRIEF-->
+  <!--END !PROJECT_NAME-->
+  <!--BEGIN DISABLE_INDEX-->
+   <!--BEGIN SEARCHENGINE-->
+     <!--BEGIN !FULL_SIDEBAR-->
+    <td>$searchbox</td>
+     <!--END !FULL_SIDEBAR-->
+   <!--END SEARCHENGINE-->
+  <!--END DISABLE_INDEX-->
+ </tr>
+  <!--BEGIN SEARCHENGINE-->
+   <!--BEGIN FULL_SIDEBAR-->
+   <tr><td colspan="2">$searchbox</td></tr>
+   <!--END FULL_SIDEBAR-->
+  <!--END SEARCHENGINE-->
+ </tbody>
+</table>
+</div>
+<!--END TITLEAREA-->
+<!-- end header part -->

dist/doxygen/mobile-nav.js

@@ -0,0 +1,65 @@
+/**
+ * Mobile navigation toggle for Doxygen documentation
+ */
+
+(function() {
+  // Only run on mobile devices
+  function isMobile() {
+    return window.innerWidth <= 767;
+  }
+
+  function initMobileNav() {
+    if (!isMobile()) return;
+    
+    const pageNav = document.getElementById('page-nav');
+    if (!pageNav) return;
+
+    // Create toggle button
+    const toggleBtn = document.createElement('button');
+    toggleBtn.id = 'page-nav-toggle';
+    toggleBtn.setAttribute('aria-label', 'Toggle page navigation');
+    toggleBtn.innerHTML = '<span></span><span></span><span></span>';
+    document.body.appendChild(toggleBtn);
+
+    // Create backdrop
+    const backdrop = document.createElement('div');
+    backdrop.id = 'page-nav-backdrop';
+    document.body.appendChild(backdrop);
+
+    // Toggle function
+    function toggleNav() {
+      const isOpen = pageNav.classList.toggle('mobile-open');
+      backdrop.classList.toggle('active', isOpen);
+      document.body.style.overflow = isOpen ? 'hidden' : '';
+    }
+
+    // Event listeners
+    toggleBtn.addEventListener('click', toggleNav);
+    backdrop.addEventListener('click', toggleNav);
+
+    // Close on escape key
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && pageNav.classList.contains('mobile-open')) {
+        toggleNav();
+      }
+    });
+  }
+
+  // Initialize on load and resize
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initMobileNav);
+  } else {
+    initMobileNav();
+  }
+
+  window.addEventListener('resize', function() {
+    const pageNav = document.getElementById('page-nav');
+    const backdrop = document.getElementById('page-nav-backdrop');
+    
+    if (!isMobile() && pageNav) {
+      pageNav.classList.remove('mobile-open');
+      if (backdrop) backdrop.classList.remove('active');
+      document.body.style.overflow = '';
+    }
+  });
+})();