C'è un modo per cambiare il menu a comparsa di navigazione su mobile in testo normale come sul desktop?

Ciao,

È possibile con Overriding Discourse template. Ma ti suggerisco di leggere l’intera documentazione.

In questo caso dobbiamo trovare il template della barra di navigazione. Qui puoi trovare tutti i template. https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

La barra di navigazione è un componente quindi possiamo trovarla nella cartella dei componenti. navigation-bar.hbs questo è il template che vogliamo usare.

Questo è il template della barra di navigazione in vista desktop.

{{#each this.navItems as |navItem|}}
  <NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />

Ma aspetta… sappiamo che la barra di navigazione ha una versione mobile che vogliamo cambiare con la versione desktop, quindi se guardiamo attentamente i template possiamo vedere una cartella mobile. In questa cartella possiamo trovare quei template che hanno una versione mobile. Ad esempio la barra di navigazione. Quindi dobbiamo prima andare nella cartella mobile, poi andare nei componenti e cercare navigation-bar.hbs. Sovrascriveremo questo template con la versione desktop, che ho incollato sopra.

Dalla documentazione che ho linkato sopra sappiamo che dovremmo iniziare così:

Con data-template-name dobbiamo puntare al template che vogliamo sovrascrivere.
Ora sappiamo che il percorso è: mobile → componenti → navigation-bar

<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">

</script>

Dopo di che incolliamo semplicemente il codice desktop all’interno:

Ora puoi incollare questo template in un componente nella sezione header mobile. :slightly_smiling_face:

<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
  {{#each this.navItems as |navItem|}}
  <NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>

Assicurati che il tuo template personalizzato sia sempre aggiornato. Se ci sono modifiche nel template principale navigation-bar dovresti aggiornare anche il tuo template personalizzato affinché tutto funzioni correttamente. :slightly_smiling_face:

Sul tema predefinito ha questo aspetto :arrow_down_small:


Forse è necessario uno stile CSS per adattarlo al mobile. Ma dipende dal tema che usi.

Ad esempio, il tema predefinito ha un bordo che vorrei nascondere.

Sezione Mobile / CSS

.list-controls .nav-pills > li {
  border: none;
}

3 Mi Piace