Feat/226/custom logo

django_email_learning/platform/views.py

@@ -65,6 +65,22 @@ def get_shared_context(self) -> Dict[str, Any]:
                         and getattr(self.request.user, "has_platform_admin_role", False)
                     )
                 ),
+                "customLogo": {
+                    "horizontalLight": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("HORIZONTAL_LOCKUP", {})
+                    .get("LIGHT_BACKGROUND"),
+                    "horizontalDark": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("HORIZONTAL_LOCKUP", {})
+                    .get("DARK_BACKGROUND"),
+                    "verticalLight": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("VERTICAL_LOCKUP", {})
+                    .get("LIGHT_BACKGROUND"),
+                    "verticalDark": DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO", {})
+                    .get("VERTICAL_LOCKUP", {})
+                    .get("DARK_BACKGROUND"),
+                }
+                if DJANGO_EMAIL_LEARNING_SETTINGS.get("LOGO")
+                else None,
                 "isOrganizationAdmin": (
                     self.request.user.is_superuser
                     or (

django_service/settings.py

@@ -110,6 +110,16 @@
             "COMPONENT_TAG": "<l-helix />",
         }
     },
+    "LOGO": {
+        "HORIZONTAL_LOCKUP": {
+            "LIGHT_BACKGROUND": None,
+            "DARK_BACKGROUND": None,
+        },
+        "VERTICAL_LOCKUP": {
+            "LIGHT_BACKGROUND": None,
+            "DARK_BACKGROUND": None,
+        },
+    },
 }
 
 

docs/source/installation.rst

@@ -132,6 +132,55 @@ The default email address for outgoing course emails. If not specified, falls ba
         'FROM_EMAIL': 'courses@yourdomain.com',
     }
 
+**SIDEBAR.CUSTOM_COMPONENT**
+
+Optional configuration for injecting a custom component in the platform sidebar.
+
+- ``SCRIPT_URL``: URL of the JavaScript module that registers your custom element.
+- ``STYLE_URL``: Optional stylesheet URL for the component (use ``None`` if not needed).
+- ``COMPONENT_TAG``: HTML tag rendered in the sidebar.
+
+.. code-block:: python
+
+    DJANGO_EMAIL_LEARNING = {
+        'SITE_BASE_URL': 'https://yourdomain.com',
+        'ENCRYPTION_SECRET_KEY': 'your-very-long-random-string',
+        'SIDEBAR': {
+            'CUSTOM_COMPONENT': {
+                'SCRIPT_URL': 'url/path-to-your-component.js',
+                'STYLE_URL': 'url/path-to-your-component.css',
+                'COMPONENT_TAG': '<your-component />',
+            }
+        },
+    }
+
+**LOGO**
+
+Optional configuration for branding assets in the platform header.
+
+- ``HORIZONTAL_LOCKUP``: Used on mobile devices where the sidebar is not open by default and the logo is shown in the top navbar.
+- ``VERTICAL_LOCKUP``: Used for sidebar-oriented layouts.
+
+    - ``LIGHT_BACKGROUND``: Logo URL/path for light backgrounds.
+    - ``DARK_BACKGROUND``: Logo URL/path for dark backgrounds.
+
+.. code-block:: python
+
+    DJANGO_EMAIL_LEARNING = {
+        'SITE_BASE_URL': 'https://yourdomain.com',
+        'ENCRYPTION_SECRET_KEY': 'your-very-long-random-string',
+        'LOGO': {
+            'HORIZONTAL_LOCKUP': {
+                'LIGHT_BACKGROUND': 'url/path-to-horizontal-logo-for-light-background.png',
+                'DARK_BACKGROUND': 'url/path-to-horizontal-logo-for-dark-background.png',
+            },
+            'VERTICAL_LOCKUP': {
+                'LIGHT_BACKGROUND': 'url/path-to-vertical-logo-for-light-background.png',
+                'DARK_BACKGROUND': 'url/path-to-vertical-logo-for-dark-background.png',
+            },
+        },
+    }
+
 Email Backend Configuration
 ---------------------------
 

frontend/src/components/MenuBar.jsx

@@ -54,14 +54,23 @@ function MenuBar({activeOrganizationId, changeOrganizationCallback, showOrganiza
     const [organizations, setOrganizations] = useState([])
     const [deliverContentsJobStatus, setDeliverContentsJobStatus] = useState(null)
     const [chip, setChip] = useState(null)
-    const { localeMessages, isPlatformAdmin, isOrganizationAdmin, direction, apiBaseUrl, platformBaseUrl, sidebarCustomComponent } = useAppContext();
+    const { localeMessages, isPlatformAdmin, isOrganizationAdmin, direction, apiBaseUrl, platformBaseUrl, sidebarCustomComponent, customLogo } = useAppContext();
 
     const theme = useTheme();
     const isMdUpScreen = useMediaQuery(theme.breakpoints.up('md'));
 
     const drawerVariant = isMdUpScreen ? "permanent" : "temporary";
-    const logoHorizontalUrl = theme.palette.mode === 'light' ? logoHorizontalLightUrl : logoHorizontalDarkUrl;
-    const logoVerticalUrl = theme.palette.mode === 'light' ? logoVerticalLightUrl : logoVerticalDarkUrl;
+    let logoHorizontalUrl, logoVerticalUrl;
+    if (customLogo) {
+        logoHorizontalUrl = theme.palette.mode === 'light' ? (customLogo.horizontalLight ? customLogo.horizontalLight : customLogo.horizontalDark) : (customLogo.horizontalDark ? customLogo.horizontalDark : customLogo.horizontalLight);
+        logoVerticalUrl = theme.palette.mode === 'light' ? (customLogo.verticalLight ? customLogo.verticalLight : customLogo.verticalDark) : (customLogo.verticalDark ? customLogo.verticalDark : customLogo.verticalLight);
+    }
+    if (!logoHorizontalUrl) {
+        logoHorizontalUrl = theme.palette.mode === 'light' ? logoHorizontalLightUrl : logoHorizontalDarkUrl;
+    }
+    if (!logoVerticalUrl) {
+        logoVerticalUrl = theme.palette.mode === 'light' ? logoVerticalLightUrl : logoVerticalDarkUrl;
+    }
 
     const jobsStatusMap = {
         "healthy": {