custom UI requirement

[Mahi maheshwari]

Hi,
I have a custom Ui requirement that goes like It will have a
header,sidebar(will be on the left hand side of the page),container(will be
in the center of the page) and a footer.
The layout for the ui is here => layout
<https://www.canva.com/design/DAEugiu7sfs/l9Ogh556HW4n_zAkbJS3Xg/edit#>
I have created a plugin called "HOME" for the home page.
In this home page plugin I have created an ftl file for the ui of the home
page.
The path for the ftl file where I have created the home page ui is
plugins/HOME/webapp/HOME/crud/AddHome.ftl =>pathToTheFile
<https://www.canva.com/design/DAEug2AmF7E/oVe10IsHhEtf7SPdCJhjXw/edit#>
The Home page UI will look like this => homePageUi
<https://www.canva.com/design/DAEug20BJ-I/27LzvfWgMPX2a1bKdgBfLA/edit> now
I want to display the same header,sidebar and footer of the home page to
all the modules in the ofbiz like for asset
maintenance,party,manufacturing,product catalog,facility and order.
The container content will change according to the module.
for example, If I click on the asset maintenance module in the side-bar in
the home page It will direct me to the asset maintenance page and this
change of the modules content should happen only inside the container(which
is of grey color) =>  referToThis
<https://www.canva.com/design/DAEug3mJSbE/lDQDNfQMpMeYdygo5Ri1Iw/edit>

The code for home page ui is as below
<div class="screenlet-body">
    <#if !userLogin?has_content>
      <div>${uiLabelMap.WebtoolsForSomethingInteresting}.</div>
      <br />
      <div>${uiLabelMap.WebtoolsNoteAntRunInstall}</div>
      <br />
      <div><a
href="<@ofbizUrl>checkLogin</@ofbizUrl>">${uiLabelMap.CommonLogin}</a></div>
    </#if>
    <#if userLogin?has_content>
      <ul class="webToolList" id="home">
         <li><a
href="/manufacturing/control/main?externalLoginKey=ELf8650276-c0c1-4952-9936-fd87e090beff">
             <h2 id="production">${uiLabelMap.HOMEProduction}</h2></a>
         </li>
         <li><a
href="/facility/control/main?externalLoginKey=ELfccd14d0-0b7b-4ded-844d-d8a9b950187c">
             <h2 id="inv">${uiLabelMap.HOMEInventoryManagement}</h2></a>
         </li>
         <li><a
href="/assetmaint/control/main?externalLoginKey=ELfccd14d0-0b7b-4ded-844d-d8a9b950187c">
             <h2 id="asset">${uiLabelMap.HOMEAssetMaintenance}</h2></a>
         </li>
         <li><a
href="/ordermgr/control/main?externalLoginKey=ELe412b3d4-a7a5-42a8-bc8c-9be077c664b9">
             <h2 id="order">${uiLabelMap.HOMEOrder}</h2></a>
         </li>
         <li><a
href="/partymgr/control/main?externalLoginKey=EL154c28ab-c21d-4004-8ab4-cc18d49bbe65">
             <h2 id="users">${uiLabelMap.HOMEUsers}</h2></a>
         </li>
         <li><a
href="/catalog/control/main?externalLoginKey=ELfccd14d0-0b7b-4ded-844d-d8a9b950187c">
             <h2 id="prodcatalog">${uiLabelMap.HOMEProductCatalog}</h2></a>
         </li>

     </ul>
    </#if>
</div>


how can I do this?

Thanks.