From cd9244fd4f7a74eb1de0dc7a418959e390d49a1f Mon Sep 17 00:00:00 2001
From: Arthur Hanson <worldnomad@gmail.com>
Date: Tue, 18 Jun 2024 05:28:18 -0700
Subject: [PATCH] 16416 enable dark/light toggle in mobile view (#16635)

* 16416 enable dark/light toggle in mobile view

* 16416 move to inc file
---
 netbox/templates/base/layout.html      | 10 ++--------
 netbox/templates/inc/light_toggle.html | 10 ++++++++++
 2 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 netbox/templates/inc/light_toggle.html

diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index d53591cb4..9ba6fded3 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -35,6 +35,7 @@ Blocks:
 
         {# User menu (mobile view) #}
         <div class="navbar-nav flex-row d-lg-none">
+          {% include 'inc/light_toggle.html' %}
           {% include 'inc/user_menu.html' %}
         </div>
 
@@ -52,14 +53,7 @@ Blocks:
 
         <div class="navbar-nav flex-row align-items-center order-md-last">
           {# Dark/light mode toggle #}
-          <div class="d-none d-md-flex">
-            <button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
-              <i class="mdi mdi-lightbulb"></i>
-            </button>
-            <button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
-              <i class="mdi mdi-lightbulb-on"></i>
-            </button>
-          </div>
+          {% include 'inc/light_toggle.html' %}
 
           {# User menu #}
           {% include 'inc/user_menu.html' %}
diff --git a/netbox/templates/inc/light_toggle.html b/netbox/templates/inc/light_toggle.html
new file mode 100644
index 000000000..7ce9dffca
--- /dev/null
+++ b/netbox/templates/inc/light_toggle.html
@@ -0,0 +1,10 @@
+{% load i18n %}
+
+<div class="d-flex">
+  <button class="btn color-mode-toggle hide-theme-dark" title="{% trans "Enable dark mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+    <i class="mdi mdi-lightbulb"></i>
+  </button>
+  <button class="btn color-mode-toggle hide-theme-light" title="{% trans "Enable light mode" %}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+    <i class="mdi mdi-lightbulb-on"></i>
+  </button>
+</div>