From 0a4a1a5f277e5d8858a8b2ba5926a454ddcde411 Mon Sep 17 00:00:00 2001
From: hinakhadim <hina.khadim@arbisoft.com>
Date: Mon, 19 Aug 2024 11:45:27 +0500
Subject: [PATCH] fix: show toggle theme button when THEME_COOKIE_NAME config
 is set

---
 src/DesktopHeader.jsx     | 2 +-
 src/ThemeToggleButton.jsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx
index d915f7812..791aac8e4 100644
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -157,7 +157,7 @@ class DesktopHeader extends React.Component {
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
               className="nav secondary-menu-container align-items-center ml-auto"
             >
-              <ThemeToggleButton />
+              <div className="mr-3"><ThemeToggleButton /></div>
               {loggedIn
                 ? (
                   <>
diff --git a/src/ThemeToggleButton.jsx b/src/ThemeToggleButton.jsx
index 862e4d01e..5b66f4ab2 100644
--- a/src/ThemeToggleButton.jsx
+++ b/src/ThemeToggleButton.jsx
@@ -3,6 +3,8 @@ import { getConfig } from '@edx/frontend-platform';
 import Cookies from 'universal-cookie';
 
 const ThemeToggleButton = () => {
+  const themeCookieName = getConfig().THEME_COOKIE_NAME ? getConfig().THEME_COOKIE_NAME : null;
+
   const getNextWeek = () => {
     const today = new Date();
     return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
@@ -11,7 +13,6 @@ const ThemeToggleButton = () => {
   const onToggleTheme = () => {
     const cookies = new Cookies();
     const serverURL = new URL(getConfig().LMS_BASE_URL);
-    const themeCookieName = getConfig().THEME_COOKIE_NAME;
 
     const options = { domain: serverURL.hostname, path: '/', expires: getNextWeek() };
     let themeName = '';
@@ -26,6 +27,10 @@ const ThemeToggleButton = () => {
     cookies.set(themeCookieName, themeName, options);
   };
 
+  if (!themeCookieName) {
+    return <div />;
+  }
+
   return (
     <div className="theme-toggle-button">
       <span id="darkmode" role="button" tabIndex="0" onClick={onToggleTheme} onKeyDown={onToggleTheme}>