Main Side Nav displays logo and company name more effiently

agent/css/sidebar_brand_fix.css

@@ -1,8 +0,0 @@
-/* Custom syling for scaling the brand text (MSP name) in the sidebar */
-
-.app-sidebar .brand-text {
-    display: inline-block;
-    vertical-align: middle;
-    white-space: nowrap;
-    transform-origin: left center;
-}

agent/includes/side_nav.php

@@ -1,7 +1,3 @@
-<!-- Custom fix for scaling the brand text (MSP name) in the sidebar -->
-<link rel="stylesheet" href="css/sidebar_brand_fix.css">
-<script src="js/sidebar_brand_fix.js" defer></script>
-
 <!-- Main Sidebar Container -->
 <aside class="app-sidebar shadow d-print-none" data-bs-theme="dark">
 
@@ -16,11 +12,31 @@
     if (!empty($config_internal_client_id) && lookupUserPermission("module_client") >= 1 && hasClientAccess($config_internal_client_id)) {
         $brand_link = "/agent/client_overview.php?client_id=" . intval($config_internal_client_id);
     }
+
+    /*
+     * The company's mark: the logo from Admin > Settings > Company Details on a light
+     * tile, or the company's initials on the theme colour when there is none (or the
+     * file has gone missing). The tile grows sideways for a wide logo rather than
+     * shrinking it to a postage stamp. The name wraps to two lines, then ellipses -
+     * the full name is in the tooltip.
+     */
+    $brand_logo = basename((string) ($session_company_logo ?? ''));
+    if ($brand_logo === '' || !is_file(__DIR__ . "/../../uploads/settings/$brand_logo")) {
+        $brand_logo = '';
+    }
+    $brand_name = escapeHtml($session_company_name);
     ?>
 
-    <div class="sidebar-brand">
-        <a class="brand-link" href="<?= $brand_link ?>">
-            <span class="brand-text h4 mb-0" id="sidebar-brand-text"><?= escapeHtml($session_company_name) ?></span>
+    <div class="sidebar-brand itflow-brand">
+        <a class="brand-link itflow-brand-link" href="<?= $brand_link ?>" title="<?= $brand_name ?>">
+            <?php if ($brand_logo) { ?>
+                <span class="itflow-brand-mark itflow-brand-mark-logo">
+                    <img src="/uploads/settings/<?= escapeHtml(rawurlencode($brand_logo)) ?>" alt="" decoding="async">
+                </span>
+            <?php } else { ?>
+                <span class="itflow-brand-mark itflow-brand-mark-initials" aria-hidden="true"><?= escapeHtml(clientInitials('', $session_company_name)) ?></span>
+            <?php } ?>
+            <span class="itflow-brand-name"><?= $brand_name ?></span>
         </a>
     </div>
 

agent/js/sidebar_brand_fix.js

@@ -1,19 +0,0 @@
-function fitBrandText() {
-    text.style.transform = 'none';
-    // getBoundingClientRect gives real on-screen edges, unlike
-    // offsetLeft which is unreliable for inline text
-    var available = link.getBoundingClientRect().right - text.getBoundingClientRect().left - 8;
-    var natural = text.scrollWidth;
-    // Scale rather than step font-size down.
-    var scale = natural > available ? available / natural : 1;
-    text.style.transform = 'scale(' + scale.toFixed(4) + ')';
-}
-
-var text = document.getElementById('sidebar-brand-text');
-
-if (text) {
-    var link = text.closest('.brand-link');
-
-    // Fires once on observe as well as any later width change
-    new ResizeObserver(fitBrandText).observe(link);
-}

css/itflow_custom.css

@@ -305,6 +305,85 @@ a:focus {
 .app-sidebar .sidebar-brand h4.brand-text {
     font-size: min(1.6rem, calc(1.275rem + .3vw));
 }
+
+/* Company brand - agent/includes/side_nav.php (main nav only; the client,
+   admin and reports navs keep their "Back | ..." headers above).
+
+   The logo or initials tile with the company name beside it, the whole row one
+   rounded hover target like a workspace switcher. Sized to sit inside the 3rem
+   header that lines up with the top bar. */
+.app-sidebar .itflow-brand-link {
+    gap: .6rem;
+    height: 100%;
+    padding: .2rem .4rem;
+    border-radius: var(--bs-border-radius);
+    color: #fff;
+    transition: background-color .15s ease-in-out;
+}
+.app-sidebar .itflow-brand-link:hover {
+    background-color: rgba(255, 255, 255, .07);
+    color: #fff;
+}
+.app-sidebar .itflow-brand-link:focus-visible {
+    outline: 2px solid var(--itflow-accent, var(--bs-primary));
+    outline-offset: -2px;
+}
+.itflow-brand-mark {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    border-radius: var(--bs-border-radius);
+    overflow: hidden;
+}
+/* Logos are drawn for a light page, so they get a light tile. A wide logo
+   widens the tile (up to a point) instead of shrinking to fit a square. */
+.itflow-brand-mark-logo {
+    min-width: 2rem;
+    max-width: 5.5rem;
+    padding: .2rem .3rem;
+    background-color: #fff;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
+}
+.itflow-brand-mark-logo img {
+    display: block;
+    width: auto;
+    height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+}
+/* No logo: the company's initials on the theme colour. The inner ring keeps
+   the tile visible when the theme colour is close to the sidebar's (black,
+   navy, gray). */
+.itflow-brand-mark-initials {
+    width: 2rem;
+    font-size: .7rem;
+    font-weight: 700;
+    letter-spacing: .03em;
+    color: #fff;
+    background-color: var(--itflow-accent, #007bff);
+    background-image: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .18));
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .35);
+}
+.theme-yellow .itflow-brand-mark-initials {
+    color: #1f2d3d;
+}
+/* Two lines, then an ellipsis. v4's .sidebar-brand is nowrap, so wrapping
+   has to be switched back on here. */
+.itflow-brand-name {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    min-width: 0;
+    overflow: hidden;
+    font-size: .95rem;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -.01em;
+    white-space: normal;
+    overflow-wrap: anywhere;
+}
 .app-sidebar .sidebar-menu .nav-link,
 .app-sidebar .nav-header {
     color: #c2c7d0;

includes/load_company_settings.php

@@ -1,8 +1,9 @@
 <?php
-$sql = mysqli_query($mysqli, "SELECT company_country, company_currency, company_locale, company_name FROM companies, settings WHERE settings.company_id = companies.company_id AND companies.company_id = 1");
+$sql = mysqli_query($mysqli, "SELECT company_country, company_currency, company_locale, company_logo, company_name FROM companies, settings WHERE settings.company_id = companies.company_id AND companies.company_id = 1");
 $row = mysqli_fetch_assoc($sql);
 
 $session_company_name = $row['company_name'];
+$session_company_logo = $row['company_logo'];
 $session_company_country = $row['company_country'];
 $session_company_locale = $row['company_locale'];
 $session_company_currency = $row['company_currency'];