How to edit the Sidebar

Development
1

Hello World!

i’m referring to an already closed thread with the same subject-title.

community. zammad. org/t/ how-to-edit-the-sidebar/9411

I managed to add some custom links to the sidebar, following @Stubenhocker 's method, with his well written .js

// Change these fields to whatever urls you want to link to in your sidebar, the id attribute should be unique for the entire page
var links = [
  { id: 'custom-link-1', name: 'Example Link 1', icon: 'icon-chain', url: 'https://www.example.com', permission: 'ticket.agent' },
  { id: 'custom-link-2', name: 'Example Link 2', icon: 'icon-cloud', url: 'https://www.zammad.com', permission: 'ticket.agent' },
  { id: 'custom-link-3', name: 'Example Link 3', icon: 'icon-external', url: 'https://www.zammad.org' },
];

// Failsafe in case things go wrong, generally it adds these links fine after just two detected mutations.
var failsafecount = 0;

function check(changes, observer) {
  if (failsafecount > 999) return;
  var navMenu = $("#navigation > .menu.js-menu");
  if (!navMenu.length) return;
  links.forEach(function(link) {
      if ((!link.permission || App.User.current && App.User.current().permission(link.permission)) && !$('#' + link.id).length) {
          ++failsafecount;
          navMenu.append (
              '<a class="menu-item" href="' + link.url + '" target="_blank" id="' + link.id + '"><svg class="icon icon-lock menu-item-icon"><use xlink:href="assets/images/icons.svg#' + link.icon + '"></use></svg><span class="menu-item-name">' + link.name + '</span></a>'
          );
      }
  });
}

new MutationObserver(check).observe(document, {childList: true, subtree: true});

Now i would like to add some internal Zammad-Links to my System, which would open just in the current tab, or better say, links which i can use to navigate to a specific submenu for example… , instead of opening a new tab.

How to do that?

Any help is appreciated :slight_smile:

2

Not my code, but I will try to help you. Normally the new tab is controlled by the target attribute. _blank means to open the link in a new tab:

https://wiki.selfhtml.org/wiki/HTML/Attribute/target

Here is a modified version (untested) which provides a local attribute to control it:

// Change these fields to whatever urls you want to link to in your sidebar, the id attribute should be unique for the entire page
var links = [
  { id: 'custom-link-1', name: 'Example Link 1', icon: 'icon-chain', url: 'https://www.example.com', permission: 'ticket.agent' },
  { id: 'custom-link-2', name: 'Example Link 2', icon: 'icon-cloud', url: 'https://www.zammad.com', permission: 'ticket.agent' },
  { id: 'custom-link-3', name: 'Example Link 3', icon: 'icon-external', url: 'https://www.zammad.org' },
  { id: 'custom-link-4', name: 'Example Link 4', icon: 'icon-external', url: '#ticket/zoom/124848', local: true },
];

// Failsafe in case things go wrong, generally it adds these links fine after just two detected mutations.
var failsafecount = 0;

function check(changes, observer) {
  if (failsafecount > 999) return;
  var navMenu = $("#navigation > .menu.js-menu");
  if (!navMenu.length) return;
  links.forEach(function(link) {
      if ((!link.permission || App.User.current && App.User.current().permission(link.permission)) && !$('#' + link.id).length) {
          ++failsafecount;
          navMenu.append (
            '<a class="menu-item" href="' + link.url + '"' + (link.local ? '' : ' target="_blank"') + ' id="' + link.id + '"><svg class="icon icon-lock menu-item-icon"><use xlink:href="assets/images/icons.svg#' + link.icon + '"></use></svg><span class="menu-item-name">' + link.name + '</span></a>'
          );
      }
  });
}

new MutationObserver(check).observe(document, {childList: true, subtree: true});
1 Like
3

nice, thats exactly what i was looking for. thank you sir!

now, is there an easy way, to get the actual state visible without much effort?
i mean to get it turn blue/clicked when im on that specific link, (like the behaviour for the default links, dashboard and overview.)

im not sure about that, since for my understanding, the custom.js just adds some links but not a menu, which the dashboard or overview is?

altough, it would be a nice- , but not a must have :slight_smile: