Add footer with switch.

templates/footer.html.twig

@@ -0,0 +1,9 @@
+<div class="container">
+    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+        <div class="col-md-4 d-flex align-items-center">
+            <span class="mb-3 mb-md-0 text-body-secondary">© 2025 Company, Inc</span>
+            <a class="align-items-center text-decoration-none" data-bs-theme-value="light">☀️ Light</a>
+            <a class="align-items-center text-decoration-none" data-bs-theme-value="dark">🌕 Dark</a>
+        </div>
+    </footer>
+</div>

templates/template.html.twig

@@ -34,21 +34,13 @@
                     return
                 }
 
-                const themeSwitcherText = document.querySelector('#bd-theme-text')
-                const activeThemeIcon = document.querySelector('.theme-icon-active use')
                 const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-                const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
 
                 document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
                     element.classList.remove('active')
-                    element.setAttribute('aria-pressed', 'false')
                 })
 
                 btnToActive.classList.add('active')
-                btnToActive.setAttribute('aria-pressed', 'true')
-                activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-                const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
-                themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
 
                 if (focus) {
                     themeSwitcher.focus()
@@ -124,53 +116,9 @@
                                     class="badge text-bg-secondary">{{ discontinuedCount() }}</span></a>
                     </li>
                 {% endcache %}
-                <li class="nav-item dropdown">
+                {#                <li class="nav-item dropdown"> #}
-                    <button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle d-flex align-items-center"
+                {#                   #}
-                            id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown"
+                {#                </li> #}
-                            data-bs-display="static" aria-label="Toggle theme (auto)">
-                        <svg class="bi my-1 theme-icon-active" aria-hidden="true">
-                            <use href="#circle-half"></use>
-                        </svg>
-                        <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span></button>
-                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-                        <li>
-                            <button type="button" class="dropdown-item d-flex align-items-center"
-                                    data-bs-theme-value="light" aria-pressed="false">
-                                <svg class="bi me-2 opacity-50" aria-hidden="true">
-                                    <use href="#sun-fill"></use>
-                                </svg>
-                                Light
-                                <svg class="bi ms-auto d-none" aria-hidden="true">
-                                    <use href="#check2"></use>
-                                </svg>
-                            </button>
-                        </li>
-                        <li>
-                            <button type="button" class="dropdown-item d-flex align-items-center"
-                                    data-bs-theme-value="dark" aria-pressed="false">
-                                <svg class="bi me-2 opacity-50" aria-hidden="true">
-                                    <use href="#moon-stars-fill"></use>
-                                </svg>
-                                Dark
-                                <svg class="bi ms-auto d-none" aria-hidden="true">
-                                    <use href="#check2"></use>
-                                </svg>
-                            </button>
-                        </li>
-                        <li>
-                            <button type="button" class="dropdown-item d-flex align-items-center active"
-                                    data-bs-theme-value="auto" aria-pressed="true">
-                                <svg class="bi me-2 opacity-50" aria-hidden="true">
-                                    <use href="#circle-half"></use>
-                                </svg>
-                                Auto
-                                <svg class="bi ms-auto d-none" aria-hidden="true">
-                                    <use href="#check2"></use>
-                                </svg>
-                            </button>
-                        </li>
-                    </ul>
-                </li>
             </ul>
 
             <form class="form-floating d-flex col-lg-6 col-sm-8" role="search" action="{{ path('app_search') }}">
@@ -184,6 +132,7 @@
 
 </nav>
 {% block content %}{% endblock %}
+{{ include('footer.html.twig') }}
 <script src="/templates/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>