Можем ли мы добавить пункты нашего меню в Gitkit Starter kit "Sign cum User Info " ( #navbar)?

Question

Можем ли мы добавить пункты нашего меню в стартовый набор Gitkit NavBar?
В выпадающем списке есть два элемента списка: Manage Account а также Sign Out,
Можно ли добавить третий вариант с URL-ссылкой (скажем, как Update Profile)

HTML для #navbar загружается через Javascript-код Gitkit.

Я использую GAE Python.

Возможные решения, о которых я мог бы подумать:
После полной загрузки моей веб-страницы я могу добавить свой собственный <li> пункты списка выпадающего меню #navbar,
Или же
Напишите пользовательский виджет "Войти в пользовательскую информацию" ( #navbar).

Есть ли лучший и более простой подход?

МОЙ ЗАПРОС НА GITKIT TEAM ДЛЯ УЛУЧШЕНИЯ
Было бы здорово, если бы мы могли предоставить наши пользовательские пункты меню вместе с их URL-ссылками в качестве опций ниже JS-кода, который загружает #navbar:

<script type=text/javascript>
  window.google.identitytoolkit.signInButton(
    '#navbar', // accepts any CSS selector
    {
      widgetUrl: "http://www.mywebsite.com/oauth2callback",
      signOutUrl: "/", 

      // Example of possible solution ( my suggestion ): 
      custom_menu_item__1__name : "item_1", // My Custom Menu Item 1 
      custom_menu_item__1__link : "http://site/link_url_1", 
      :: 
      custom_menu_item__n__name : "item_1", // My Custom Menu Item n 
      custom_menu_item__n__link : "http://site/link_url_1", 
    }
  );
</script>

ОБНОВИТЬ
Временное исправление = я временно добавил необходимые пункты меню, используя jquery. Ниже приведен фрагмент кода, чтобы помочь любому с аналогичными потребностями до получения официального решения:

На странице загрузки,

custom_menu_add_job_id = setInterval(function(){ 
        add_custom_menu(); 
    }, 5000); 

function add_custom_menu(){ 
    if ($("#navbar").find(".gitkit-user-card-menu").length){ 
        $(".gitkit-user-card-menu").append($("<li class='gitkit-user-card-menuitem' id='smh_user_profile' tabindex='0'> <img src='/images/person_32x32.png' class='user_profile_menu_icon' > Profile </li>")
            .click(function(){ 
                window.location.href = window.location.protocol + "//" + window.location.host + "/user/"; 
            }) 
        ); 
        clearInterval(custom_menu_add_job_id); 
    } 
}

Если вы хотите, вы можете проверить это вживую на ShowMyHall.

Answer 1

Настраиваемые пункты меню теперь поддерживаются в виджете JavaScript Ikity Toolkit. Примеры:

window.google.identitytoolkit.signInButton(
  '#navbar', // accepts any CSS selector
  {
    widgetUrl: "...",
    dropDownMenu: [
        {
          'label': 'Check Configuration',
          'url': '/config'
        },
        {
          'label': 'Sign out',
          'handler': function() {google.identitytoolkit.signOut();}
        },
        {
          'label': 'Manage Account',
          'handler': function() {google.identitytoolkit.manageAccount();}
        },
      ]
  };

Answer 2

До появления этой функции я также реализовывал аналогичное временное исправление, которое вы обрисовали в конце вашего вопроса. Я использовал таймер следующим образом (обратите внимание, что мой gitkit использует div login):

    $(window).load(function() {
        $("#login").hover(function() {
            add_custom_menu_items();
        })
    });

    function add_custom_menu_items(){
        if ($("#login").find(".gitkit-user-card-menu").length == 1){
            if ($("#my_data_link").length == 0) {
                $(".gitkit-user-card-menu li:eq(0)").after($('<li class="gitkit-user-card-menuitem" id="my_data_link" tabindex="0"><a href="/my_data/">My data</a></li>'));
            }
        }
    }

В основном, когда вы наводите курсор мыши на элемент div, он добавляет пункт меню, но только если он еще не был добавлен.

Answer 3

Раскрывающееся меню навигационной панели не поддерживает изображения, но если вам это действительно нужно, вот хакерский способ сделать это в jquery:

var config = {...}; // your config which includes the custom drop down menu.
// Render button on load. (now supported)
window.onload = function() {
  window.google.identitytoolkit.signInButton(
    '#navbar', // accepts any CSS selector
    config);
  // This will modify the html content of the first option in drop down menu.
  // Make menu dom changes.
  jQuery('#navbar li:first-child').html('<img src="img.png">My Label');
}