1
0

main.js 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. // Language selector
  2. (function () {
  3. var btn = document.querySelector('.lang-btn');
  4. var popup = document.querySelector('.lang-popup');
  5. if (!btn || !popup) return;
  6. btn.addEventListener('click', function (e) {
  7. e.stopPropagation();
  8. popup.classList.toggle('open');
  9. });
  10. document.addEventListener('click', function () {
  11. popup.classList.remove('open');
  12. });
  13. popup.addEventListener('click', function (e) {
  14. var link = e.target.closest('[data-lang]');
  15. if (!link) return;
  16. e.preventDefault();
  17. var lang = link.getAttribute('data-lang');
  18. localStorage.setItem('preferred-lang', lang);
  19. var basePath = document.documentElement.getAttribute('data-base-path') || '';
  20. var path = window.location.pathname;
  21. // Strip base path prefix, replace lang, then re-add base path
  22. var pathWithoutBase = path.slice(basePath.length);
  23. var newPath = basePath + pathWithoutBase.replace(/^\/[a-z]{2}\//, '/' + lang + '/');
  24. window.location.href = newPath;
  25. });
  26. })();
  27. // Theme toggle
  28. (function () {
  29. var btn = document.querySelector('.theme-toggle');
  30. if (!btn) return;
  31. // Feather Icons: sun (light mode) and moon (dark mode)
  32. var sunSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
  33. var moonSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
  34. function getTheme() {
  35. var stored = localStorage.getItem('preferred-theme');
  36. if (stored) return stored;
  37. return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  38. }
  39. function applyTheme(theme) {
  40. if (theme === 'light') {
  41. document.documentElement.setAttribute('data-theme', 'light');
  42. } else {
  43. document.documentElement.removeAttribute('data-theme');
  44. }
  45. btn.innerHTML = theme === 'light' ? sunSVG : moonSVG;
  46. }
  47. applyTheme(getTheme());
  48. btn.addEventListener('click', function () {
  49. var current = getTheme();
  50. var next = current === 'dark' ? 'light' : 'dark';
  51. localStorage.setItem('preferred-theme', next);
  52. applyTheme(next);
  53. });
  54. })();
  55. // Mobile sidebar toggle
  56. (function () {
  57. var toggle = document.querySelector('.sidebar-toggle');
  58. var sidebar = document.querySelector('.sidebar');
  59. if (!toggle || !sidebar) return;
  60. toggle.addEventListener('click', function () {
  61. sidebar.classList.toggle('open');
  62. });
  63. document.addEventListener('click', function (e) {
  64. if (!sidebar.contains(e.target) && e.target !== toggle) {
  65. sidebar.classList.remove('open');
  66. }
  67. });
  68. })();