How to Replace the Default AppHeader with a Custom One?

abizareyhan3 months ago

7

• 

  rubixvi3 months ago

  @654031862146007055

  posted a very good example

  https://github.com/akhrarovsaid/payload-theme-quantum-leap
• 

  abizareyhan3 months ago

  Thank you for sharing the example, appreciate it! I just checked it, and it changes the header by using CSS and replacing small parts like the logo or user icon. This is great if I only want to change those small parts. But I want to replace the whole header completely, so I can customize it exactly how I want, without being limited to changing only small parts inside it.

• 

  zed05473 months ago

  If you want to replace the header outright then what I would do is define my own on the header components config and just display: none the actual default header

  
  
  

  It's doable

• 

  abizareyhan3 months ago

  Oh, that makes sense! I'll try that. Thanks

  @654031862146007055

  @187775044921982976
• 

  rubixvi3 months ago

  surely there's a better way then display:none the original header right

• 

  abizareyhan3 months ago

  I tried this approach, and it kinda works! But I noticed the custom component gets added above the existing Payload elements (like the sidebar and main content). What I really want is to replace the default header entirely, so my custom header sits next to the sidebar (just like the original one does). But this approach is okay for now at least.

  
  
  

  Just tried a new approach, not sure if it's the cleanest way, but it does exactly what I wanted. I'm using

  createPortal

  to replace the

  app-header

  content, and now it fits my use case perfectly. Adding the code example here, just in case anyone else wanted to do the same.

  
  
  

  'use client';
  
  import { useEffect, useState } from 'react';
  import { HeaderView } from './Header';
  import { createPortal } from 'react-dom';
  
  export const ReplaceAppHeader = () => {
      const [externalElement, setExternalElement] = useState<HTMLElement | null>(null);
  
      useEffect(() => {
          const element = document.querySelector('.app-header');
          if (element) {
              element.innerHTML = '';
              setExternalElement(element as HTMLElement);
          }
      }, []);
  
      if (!externalElement) return null;
  
      return createPortal(<HeaderView />, externalElement);
  };
• 

  rubixvi3 months ago

  Pretty cool dude