recode-website/static/remove-mobile-theme-toggle.js at main · recodehive/recode-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
// Remove theme toggle from mobile sidebar
(function () {
  "use strict";

  function removeMobileThemeToggle() {
    // Wait for DOM to be ready
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", removeMobileThemeToggle);
      return;
    }

    // Function to remove theme toggle from mobile sidebar
    function hideThemeToggle() {
      let found = false;

      // First, try to find the navbar sidebar brand container
      const sidebarBrand = document.querySelector(".navbar-sidebar__brand");
      if (sidebarBrand) {
        console.log("🔍 Found sidebar brand container:", sidebarBrand);

        // Look for all buttons in the sidebar brand
        const buttons = sidebarBrand.querySelectorAll("button");
        buttons.forEach((button, index) => {
          console.log(`🔍 Button ${index}:`, button);
          console.log("  - Classes:", button.className);
          console.log("  - Aria-label:", button.getAttribute("aria-label"));
          console.log("  - Has SVG:", !!button.querySelector("svg"));

          // Check if this button contains theme-related content
          const ariaLabel = button.getAttribute("aria-label") || "";
          const hasThemeIcon =
            button.querySelector("svg") &&
            (ariaLabel.toLowerCase().includes("mode") ||
              ariaLabel.toLowerCase().includes("theme") ||
              ariaLabel.toLowerCase().includes("dark") ||
              ariaLabel.toLowerCase().includes("light"));

          // Also check if it's NOT the close button
          const isCloseButton =
            ariaLabel.toLowerCase().includes("close") ||
            ariaLabel.toLowerCase().includes("navigation") ||
            button.classList.contains("navbar-sidebar__close");

          if (hasThemeIcon && !isCloseButton) {
            console.log("🎯 Found theme toggle button, removing:", button);
            button.remove(); // Completely remove the element
            found = true;
          } else if (!isCloseButton && button.querySelector("svg")) {
            // If it's not the close button but has an SVG, it might be the theme toggle
            console.log(
              "🤔 Potential theme toggle (removing to be safe):",
              button,
            );
            button.remove();
            found = true;
          }
        });
      }

      // Fallback: Look for any button with theme-related aria-labels in the sidebar
      const sidebar = document.querySelector(".navbar-sidebar");
      if (sidebar) {
        const themeButtons = sidebar.querySelectorAll(
          'button[aria-label*="mode"], button[aria-label*="theme"], button[aria-label*="dark"], button[aria-label*="light"]',
        );
        themeButtons.forEach((button) => {
          if (!button.classList.contains("navbar-sidebar__close")) {
            console.log(
              "🎯 Found theme button via fallback, removing:",
              button,
            );
            button.remove();
            found = true;
          }
        });
      }

      return found;
    }

    // Try to hide immediately and repeatedly
    hideThemeToggle();

    // Also try after short delays in case components load later
    setTimeout(hideThemeToggle, 50);
    setTimeout(hideThemeToggle, 100);
    setTimeout(hideThemeToggle, 200);
    setTimeout(hideThemeToggle, 500);
    setTimeout(hideThemeToggle, 1000);
    setTimeout(hideThemeToggle, 2000);

    // Set up an interval to check every 500ms for the first 10 seconds
    let attempts = 0;
    const maxAttempts = 20; // 10 seconds
    const interval = setInterval(() => {
      attempts++;
      const found = hideThemeToggle();
      if (found || attempts >= maxAttempts) {
        clearInterval(interval);
        if (found) {
          console.log(
            "✅ Successfully removed theme toggle from mobile sidebar",
          );
        }
      }
    }, 500);

    // Set up a mutation observer to catch dynamically added elements
    const observer = new MutationObserver(function (mutations) {
      let shouldCheck = false;
      mutations.forEach(function (mutation) {
        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
          // Check if any added nodes contain sidebar elements
          mutation.addedNodes.forEach(function (node) {
            if (node.nodeType === 1) {
              // Element node
              if (
                node.classList?.contains("navbar-sidebar") ||
                node.querySelector?.(".navbar-sidebar")
              ) {
                shouldCheck = true;
              }
            }
          });
        }
      });

      if (shouldCheck) {
        setTimeout(hideThemeToggle, 50);
      }
    });

    // Start observing
    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });

    console.log("🚀 Mobile theme toggle remover initialized");
  }

  // Initialize
  removeMobileThemeToggle();
})();