How to create a custom header in share

To create a custom header in share server side , I follow this blog http://blogs.alfresco.com/wp/developer/2013/09/04/customizing-the-share-header-menu-part-1/ .

First of all, add the following lines of code  share-header.get.js.

Part-I ( Server side )

var myMenu = widgetUtils.findObject(model.jsonModel, "id", "HEADER_APP_MENU_BAR");
if (myMenu != null)
{
myMenu.config.widgets.push(
    {
      id: "HEADER_CUSTOM_MENU",
      name: "alfresco/menus/AlfMenuBarPopup",
      config: {
        label: "Custom Menu",
         widgets: [
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu One"             
                     }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Two"
                              }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Three"
                    }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Four"       
                          }
                 }
              ]      }
    }
  );  
// Add the client side menu creation snippet here
}

Put your share-header-get.js file in org.alfresco.share.header.custom-header folder
Don't forget to create your extension module

<extension>
   <modules>
      <module>
         <id>My CustomMenu</id>
         <auto-deploy>true</auto-deploy>
         <version>1.0</version>
         <customizations>
            <customization>
               <targetPackageRoot>org.alfresco.share.header</targetPackageRoot>
               <sourcePackageRoot>custom-header</sourcePackageRoot>
           </customization>
         </customizations>
      </module>
   </modules>
</extension>

The above snippet will add a menu called "Custom Menu" with four drop downs in header.

Part-I ( Client side )
Now we will try to create a header in client side as well ,like in share 4.2.c and prior versions.
So I ll create  the same menu in client side using dojo. Here I go. Add the below lines of code in share-header-get.js

myMenu.config.widgets.push(
    {
      id: "HEADER_CLIENT_SIDE_MENU",
      name: "alfresco/header/ClientSideMenu",
      config: {
                  label: "Client Side Menu",
              }
    }
  );

Create two javascript files called  ClientSideMenu.js ,ClientSideMenu-min.js and it should contain the following dojo snippets.

define(["dojo/_base/declare",
        "alfresco/header/AlfMenuBarPopup",
        "alfresco/core/CoreXhr",
        "dojo/_base/lang",
        "dojo/_base/array",
        "dojo/aspect",
        "dijit/registry",
        "alfresco/menus/AlfMenuGroup",
        "alfresco/header/AlfMenuItem",
        "alfresco/header/AlfCascadingMenu",
        "dojo/dom-style",
        "dijit/popup"],
        function(declare, AlfMenuBarPopup, AlfXhr, lang, array, aspect, registry, AlfMenuGroup, AlfMenuItem, AlfCascadingMenu, domStyle, popup) {
           return declare([AlfMenuBarPopup, AlfXhr], { 
              widgets: [
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Five"
                    }
                 },
                 {
                    name: "alfresco/header/AlfMenuItem",
                    config: {
                       label: "Menu Six"
                    }
                 }
              ],  
   });
});

This will create a menu called "Client Side Menu" along with two drop downs Menu Five and Menu Six. Here no need to add this js files in share-config-custom.xml file in order to manage the dependency as in share 4.2.c or prior. Those days now gone. That it!!