Custom Hamburger Menu Links

J’ai également remarqué cela et il semble que seuls les liens externes n’apparaissent pas sous Plus.

3 « J'aime »

J’utilise des liens internes dans ce composant, par exemple, j’ai un lien qui ouvre les invitations utilisateur : /my/invited/pending/

Lorsque j’ouvre le lien depuis la barre latérale, j’obtiens : Oups ! Cette page n’existe pas ou est privée.

Le lien fonctionne lorsqu’il est accédé depuis la barre d’URL.

Lorsque j’entre l’URL complète (https://domain.com/my/invited/pending/), l’URL s’ouvre comme ceci :
https://domain.com/https://domain.com/my/invited/pending/

2 « J'aime »

Oui. Problème connu.

2 « J'aime »

Bonjour,
Cela devrait fonctionner avec : Chat,/chat/browse/open :slightly_smiling_face:

2 « J'aime »

Oui, je sais. J’ai envoyé mon commentaire peut-être un peu trop vite. Eh bien, certainement trop vite, car je devrais dire qu’il faut utiliser un chemin au lieu d’une URL complète.

Lien supplémentaire pour le chat… eh bien, la nouvelle barre latérale a totalement changé le terrain de jeu et ce n’est plus nécessaire.

2 « J'aime »

J’ai jeté un œil au code de la barre latérale de Discourse et à @manuel ajout d’icônes.

Il semble qu’actuellement, il ne soit pas possible de personnaliser les liens personnalisés de l’icône car la méthode de décoration du menu hamburger ne prend pas en compte la constante prefixValue (qui contient le nom de l’icône) ou quelque chose comme ça…

Il me semble également que les décorations de menu hamburger avec api.decorateWidget vont être dépréciées. Voir :
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534

De plus, le fait que les liens externes ne fonctionnent plus pourrait provenir de ceci :
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524

Il devrait donc y avoir des changements dans le cœur pour rendre cela disponible.

:warning: Mes connaissances sur le fonctionnement de Discourse sont quasi inexistantes, je pourrais donc avoir tort.

Est-ce que j’ai raison dans mes conclusions ?

3 « J'aime »

J’ai installé ce composant de thème depuis le dépôt GitHub. J’utilise la version 3.0.0.beta15 sur mon discourse et même si je semble l’avoir ajouté, le menu hamburger n’affiche pas mon lien… Des idées ?

1 « J'aime »

Il se peut que ce soit lié à :

À ce jour, les liens externes ne fonctionnent toujours pas.
Et les liens internes doivent commencer par un chemin relatif, pas un chemin complet.

3 « J'aime »

Merci beaucoup pour ce composant utile. J’ai besoin d’ajouter quelques liens internes importants, mais maintenant que le menu hamburger est intégré dans la barre latérale, je trouve qu’ils ne sont pas très visibles sous le menu Plus. Les utilisateurs ont généralement du mal à trouver les choses, j’ai donc vraiment besoin de les placer au niveau supérieur, idéalement juste après Mes publications. Existe-t-il des astuces CSS pour y parvenir ?

2 « J'aime »

Au-delà de ce que CSS peut réaliser, je pense. L’équipe de Discourse a cela dans sa feuille de route, mais cela ne se produira pas rapidement (je pense) :

6 « J'aime »

J’utilise :

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Légal </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // Create the links
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ]

    // Mobile
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Force to wait until navigation has been loaded
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // Get the customNav Id
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

Vous pouvez voir le résultat sur https://forum.courservio.de/
La version originale de ce code provient de https://meta.discourse.org/t/add-custom-links-to-sidebar/246848. Peut-être que cela pourrait vous aider.

6 « J'aime »

@hosch Wow, très bien, exactement ce que je cherchais ! Merci beaucoup.

1 « J'aime »

@hosch Par hasard, serait-il possible de le déplacer plus haut ? Je voudrais qu’il apparaisse après la section Communauté, voire avant.


Edit : Il semble que ce soit possible avec une variation de ceci :
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* Setup a flex layout so you can reorder things */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

Je me demande s’il est possible de le déplacer à la position la plus haute ?

1 « J'aime »

Il y a une particularité avec cette méthode : le div personnalisé disparaît lors du basculement de la visibilité de la barre latérale, par exemple si la fenêtre du navigateur est étroite. C’est un problème particulièrement pour les tablettes, qui reçoivent généralement la version de bureau de Discourse et nécessitent de cliquer sur le menu hamburger pour afficher la barre latérale. Y a-t-il des solutions de contournement possibles ? Merci !


Edit : Résolu ici :

1 « J'aime »

Merci @hosch et @Olivier_Lambert de l’avoir fait.

Pourriez-vous expliquer à ce débutant où je devrais insérer ceci ? :pray:

1 « J'aime »

Comment puis-je réorganiser les éléments dans une section de barre latérale / menu hamburger ?

Par exemple, je veux placer « Toutes les catégories » au-dessus des catégories dans la section « Catégories », de même avec « Toutes les balises ».

Merci !

1 « J'aime »

Vous savez maintenant comment utiliser un composant pour le CSS, n’est-ce pas ? Ajoutez cela dans la section head.

Vous ne pouvez pas facilement. Pas encore en tout cas. Ce n’est pas totalement terminé et peaufiné pour le moment.

2 « J'aime »

J’ai essayé cela, cela m’a donné une erreur d’utilisation d’un point-virgule près de src.

Essayons encore. Merci.

1 « J'aime »

C’est toujours le cas, les solutions ci-après n’ont pas résolu le problème.

Paramètre : Invite friends,/my/invited/pending/,f

Hors sujet :

J’ai déjà vu ce style de barre latérale condensée, je ne parviens pas à le retrouver. Est-ce un composant de thème ?

1 « J'aime »

Vous pouvez utiliser ce CSS :

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}

:slight_smile:

8 « J'aime »