Rearrange the page-head

I want to apply minor rearrangement to the Navbar like this image:

So there are 2 changes:

  • Move the doc status from left to the right (move in the same file)
  • Move the breadcrumbs from navbar to page-head (move from navbar.html to page.html)

I tried to change these by creating page.html in customapp/public/js/frappe/ui/
to replace the same page.html file in frappe/public/js/frappe/ui.

But this custom html is not picked up and displayed.
As I know the custom file should follow the original location path.
And I succeed to do this with some other files.

My question:

  1. Should I also duplicate the page.js from the same location and put it in my customapp?
    And any other file should I include in the custom app?

  2. for the doc status is the matter of moving the html code position.
    But for breadcrumbs it seems also involve other js or py. How can I make this change?

I’m not a developer so really need your help please. :pray:
Thank you.