Function to go back to the main page

[lukou31]

Hi,
I have defined several tags to classify my app/links. When a go in a dedicated section there is no possibility to go back to the main page excepted by clicking on "grid" icon.

Do we have another way or is it a miss ?

[moorsey]

Just installed and have been wondering the same

I have a workaround, in adding Heimdall URL as an app and pinning it in all my sections, acting as a "Home" type button

[jeloneal]

Same issue here. @moorsey your workaround is only useful, if you don't set your apps to open in a new tab by default. Otherwise each "back" opens a new tab with the home dashboard.

So a dedicated option for a back button would be highly appreciated.

[Zariaa27]

Has this been looked into? It'd be very useful!

[kaibae19]

I have done the same workaround by adding a "Home button" to Heimdall, but I too think that it would be a lot cleaner to have a simple logo, selectable or otherwise, at the top of the page that always took you back to your home tag.

[real-easy]

can we push this ?

is it possible (may be with the css) to add a home (better an back) function by clicking at the background-image?

[Nordmann1961]

Hello together!
Has anything happened in the meantime?
I would also be very happy if there was a simple HOME button that jumps back to the initial page WITHOUT opening a new window.
With all other APP's, however, I would still like to be able to open a new window!

[real-easy]

i changed to "homarr"
https://github.com/ajnart/homarr

this project ist still in improvement. (last update last week)

[underwoodblog]

Is there still no option to go back to the main page?

[randomsampler]

As a slightly bodged way to do this:

Add these into the Custom JS and CSS areas under Settings. Just need to change the <dash-url> to whatever url heimdall is hosted on at the end of the JS file

JS:

const sortableElement = document.querySelector('.appheader');

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function createAndInsertDiv(className, referenceNode) {
  var newDiv = document.createElement("div");
  newDiv.classList.add(className);
  referenceNode.appendChild(newDiv);
  return newDiv;
}

if (sortableElement) {
  // Create the parent div 'headerInfos'
  var headerInfos = document.createElement('div');
  headerInfos.classList.add('headerInfos');
  insertAfter(sortableElement, headerInfos);

  // Create the 'divDate' div inside 'headerInfos'
  var divDate = createAndInsertDiv('divDate', headerInfos);

  // Create a button to return to the home page
  var homeButton = document.createElement('button');

  // Create an SVG for the Home icon
  var homeIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  homeIcon.setAttribute('class', 'home-icon');
  homeIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  homeIcon.setAttribute('viewBox', '0 0 24 24');
  homeIcon.setAttribute('width', '36'); // Increase the width
  homeIcon.setAttribute('height', '36'); // Increase the height

  // Path for the Home icon (customize the path as needed)
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  path.setAttribute('d', 'M10 20v-6h4v6h5v-8h3L12 2 2 12h3v8h5zM0 0h24v24H0z');
  path.setAttribute('fill', 'white'); // Set the fill color to white

  homeIcon.appendChild(path);

  homeButton.appendChild(homeIcon);

  homeButton.classList.add('home-button');
  divDate.appendChild(homeButton);

  homeButton.addEventListener('click', function () {
    // Replace this with the actual URL of your home page
    window.location.href = 'https://<dash-url>';
  });
}

With css:

.headerInfos {
  display: flex;
  justify-content: space-between; /* To space the elements */
  margin: 20px;
}

.home-button {
  order: 1;
  background-color: limegreen;
  color: white;
  padding: 10px 15px; /* Adjust padding */
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.home-icon {
  width: 35px; /* Adjust icon size */
  height: 35px; /* Adjust icon size */
  fill: white; /* Icon color */
}

[jeloneal]

Thanks, that works well. Although the icon looks a bit off. Can someone hint at directions how to change or customize it?

[jaytgagne]

OMG, I can't believe I didn't think of that, simpoly genius. I works perfectly. Thank you so much @randomsampler

and for @jeloneal, the button can be changed in the CSS section. You can make simple changes to the color by changing "limegreen" and "white" to any color you want or changing the padding "width around the house" to bigger or smaller, or it's height and width in the bottom lines for height and width.

if you wanted to make it a different kind of button you can change that out for any button config you want. Here is a site with visuals and the code you would need to replace it.

https://getcssscan.com/css-buttons-examples

[jeloneal]

Thanks for the hints @jaytgagne