updates on the new changes and logo fix and some ui changes as well

src/layout/MainLayout/Header.jsx

@@ -8,7 +8,7 @@ import Logo from '@/components/Logo';
 import UserAvatar from '@/components/UserAvatar';
 import { fetchUsers } from '@/utils/apiClient';
 
-export default function Header() {
+export default function Header({ isSidebarCollapsed }) {
   const navigate = useNavigate();
 
   let storedUserObj = { name: 'Admin', role: 'Operations Admin', id: 0 };
@@ -18,9 +18,6 @@ export default function Header() {
   } catch (e) {}
 
   const [activeUserName, setActiveUserName] = useState(storedUserObj.name || 'Admin');
-  const displayRole = storedUserObj.role === 'admin' ? 'Administrator' :
-                      storedUserObj.role === 'manager' ? 'Manager' :
-                      storedUserObj.role === 'executive' ? 'Executive' : 'Operations Admin';
 
   useEffect(() => {
     fetchUsers().then((users) => {
@@ -36,7 +33,6 @@ export default function Header() {
   }, []);
 
   return (
-    <>
     <TopNav
       label="Main navigation"
       style={{
@@ -46,9 +42,17 @@ export default function Header() {
       }}
       heading={
         <TopNavHeading
-          logo={<Logo compact height={28} />}
-          heading="Doormile CRM"
-          subheading={displayRole}
+          logo={
+            <Logo
+              compact={isSidebarCollapsed}
+              size={32}
+              height={28}
+              // Scaling visually enlarges the mark without growing its layout
+              // box, so the navbar row keeps its original width/height instead
+              // of stretching taller every time the logo gets bigger.
+              style={isSidebarCollapsed ? { transform: 'scale(1.6)' } : undefined}
+            />
+          }
           headingHref="/dashboard"
         />
       }
@@ -74,6 +78,5 @@ export default function Header() {
         </div>
       }
     />
-    </>
   );
 }

src/layout/MainLayout/Sidebar.jsx

@@ -6,10 +6,12 @@ import navItems from '@/menu/navItems';
 
 // ==============================|| DOORMILE - SIDE NAV ||============================== //
 // Thin wrapper around Astryx's SideNav template: sections + items driven by navItems.
-// Branding lives in the TopNav heading, so this stays icon+label only (Astryx guidance:
-// avoid a SideNavHeading when TopNav already carries app identity).
+// Branding lives in the TopNav logo only — a second logo here (above the nav items)
+// duplicated it, so this stays icon+label only. Collapse state is controlled from
+// MainLayout so the TopNav logo can track it (round mark collapsed, full wordmark
+// expanded).
 
-export default function Sidebar() {
+export default function Sidebar({ isCollapsed, onCollapsedChange }) {
   const location = useLocation();
   const isActive = (url) => !!url && location.pathname.startsWith(url);
 
@@ -17,7 +19,7 @@ export default function Sidebar() {
     <>
       <SideNav
         className="doormile-side-nav"
-        collapsible={{ defaultIsCollapsed: true, buttonLabel: 'Collapse navigation' }}
+        collapsible={{ isCollapsed, onCollapsedChange, buttonLabel: 'Collapse navigation' }}
         style={{
           // White + a right border/shadow matches the TopNav's chrome so the
           // top and side nav read as one unified surface instead of two
@@ -138,6 +140,16 @@ export default function Sidebar() {
           color: #C01227 !important;
         }
 
+        /* Astryx's sticky-bottom footer wrapper (the toggle button's direct
+           parent, always the nav's last direct child) drops its top padding
+           to 0 in the collapsed state while keeping 8px on the bottom, so
+           the arrow sits flush against the top of its box instead of
+           centered in the rail's height. Restore matching padding on both
+           sides so it centers correctly. */
+        .doormile-side-nav > div:last-child {
+          padding-block: 8px !important;
+        }
+
         /* Collapse/expand toggle (the "<" / ">" chevron button). It sits
            right on the sidebar's edge, so the default square ghost-button
            hover clips against that border and looks broken. Give it a

src/layout/MainLayout/index.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { AppShell } from '@astryxdesign/core/AppShell';
 
@@ -9,13 +10,17 @@ import Sidebar from './Sidebar';
 // and the auto-generated mobile drawer. Pages keep their own internal padding.
 
 export default function MainLayout() {
+  // Lifted here (rather than left as SideNav's own uncontrolled state) so the
+  // navbar's logo can track the sidebar's collapse state — one logo, not two.
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);
+
   return (
     <AppShell
       variant="section"
       height="fill"
       contentPadding={0}
-      topNav={<Header />}
-      sideNav={<Sidebar />}
+      topNav={<Header isSidebarCollapsed={isSidebarCollapsed} />}
+      sideNav={<Sidebar isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
       mobileNav={{ breakpoint: 'lg' }}
     >
       <div className="main-content-area" style={{ minHeight: '100%', boxSizing: 'border-box' }}>