# روابط قائمة الهامبرغر المخصصة

**URL:** https://meta.discourse.org/t/custom-hamburger-menu-links/87644
**Category:** Theme component
**Tags:** deprecated
**Created:** [16 مايو 2018، 2:15م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644 "2018-05-16T14:15:15Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [18 أكتوبر 2022، 5:48ص UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/65 "2022-10-18T05:48:33Z")

</div>

لاحظت هذا أيضًا ويبدو أنه لا يظهر إلا الروابط الخارجية تحت **المزيد**.

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [22 أكتوبر 2022، 2:10م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/66 "2022-10-22T14:10:27Z")

</div>

أستخدم روابط داخلية في هذا المكون، على سبيل المثال، لدي رابط يفتح دعوات المستخدم: /my/invited/pending/

عند فتح الرابط من الشريط الجانبي، أحصل على: عفوًا! هذه الصفحة غير موجودة أو خاصة.

يعمل الرابط عند الوصول إليه من شريط عنوان URL.

عند إدخال عنوان URL الكامل ([https://domain.com/my/invited/pending/](https://domain.com/my/invited/pending/))، يتم فتح عنوان URL على النحو التالي:  
[https://domain.com/https://domain.com/my/invited/pending/](https://domain.com/https://domain.com/my/invited/pending/)

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [22 أكتوبر 2022، 2:32م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/67 "2022-10-22T14:32:43Z")

</div>

نعم. مشكلة معروفة.

> [@2.9.0beta 10 and chat link is broken](https://meta.discourse.org/t/2-9-0beta-10-and-chat-link-is-broken/240437):
>
> In the new sidebar under community/more is link to adminpage of chat. There is minor typo’ish bug. I’ll get error 404 because of this: https://foorumi.katiska.eu/https://foorumi.katiska.eu/chat/browse/open

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [22 أكتوبر 2022، 3:16م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/68 "2022-10-22T15:16:50Z")

</div>

مرحباً،  
يجب أن يعمل هذا مع: `Chat,/chat/browse/open` 🙂

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [22 أكتوبر 2022، 3:20م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/69 "2022-10-22T15:20:45Z")

</div>

نعم، أعرف. ربما أرسلت تعليقي بسرعة كبيرة. حسنًا، بالتأكيد بسرعة كبيرة، لأنني يجب أن أقول إنه يجب استخدام المسار بدلاً من عنوان URL الكامل.

رابط إضافي للمحادثة… حسنًا، الشريط الجانبي الجديد غيّر الملعب تمامًا ولم يعد هناك حاجة إليه.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [8 نوفمبر 2022، 12:53ص UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/70 "2022-11-08T00:53:56Z")

</div>

ألقيت نظرة على كود الشريط الجانبي لـ Discourse و @manuel [إضافة أيقونات](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/59?u=canapin).

يبدو أنه في الوقت الحالي، لا يمكن تخصيص الروابط المخصصة للأيقونة لأن طريقة تزيين قائمة الهامبرغر لا تأخذ في الاعتبار الثابت `prefixValue` (الذي يحتوي على اسم الأيقونة) أو شيء من هذا القبيل…

يبدو لي أيضًا أن تزيينات قائمة الهامبرغر باستخدام `api.decorateWidget` سيتم إيقافها. انظر:  
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534)

أيضًا، حقيقة أن الروابط الخارجية لم تعد تعمل قد تأتي من هذا:  
[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524)

لذلك يجب أن تكون هناك بعض التغييرات في النواة لجعل هذا متاحًا.

⚠ معرفتي بكيفية عمل Discourse تكاد تكون معدومة لذلك قد أكون مخطئًا جدًا.

هل أنا على حق في اكتشافاتي؟

---

<div class="post-metadata">

### Author: ![asirota](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asirota/32/197298_2.png) [@asirota](https://meta.discourse.org/u/asirota)
#### Post date: [6 يناير 2023، 9:58م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/71 "2023-01-06T21:58:20Z")

</div>

لقد قمت بتثبيت مكون السمة هذا من مستودع github. أقوم بتشغيل 3.0.0.beta15 على discourse الخاص بي وحتى على الرغم من أنني يبدو أنني أضفته، فإن قائمة الهامبرغر لا تعرض الرابط الخاص بي… أي أفكار؟

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/5/0/b5034ffd72e0a04ba3334ab506f60db704dba5e8.png)

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [7 يناير 2023، 1:30م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/72 "2023-01-07T13:30:06Z")

</div>

قد يكون مرتبطًا بـ:

> [@Custom Hamburger Menu Links](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/65?u=canapin):
>
> I noticed this too and it seems to only the external links not appears under More.

حتى يومنا هذا، لا تزال الروابط الخارجية لا تعمل.  
ويجب أن تبدأ الروابط الداخلية بمسار نسبي، وليس بمسار كامل.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [13 يناير 2023، 2:42م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/73 "2023-01-13T14:42:38Z")

</div>

شكراً جزيلاً على هذه المكونات المفيدة. أحتاج إلى إضافة بعض الروابط الداخلية المهمة، ولكن الآن بعد أن تم دمج قائمة الهامبرغر في الشريط الجانبي، أجد أنها ليست مرئية جدًا ضمن قائمة **المزيد**. عادةً ما يكون المستخدمون سيئين في العثور على الأشياء، لذا أحتاج حقًا إلى وضعها في المستوى الأعلى، ويفضل أن يكون ذلك مباشرة بعد **منشوراتي**. هل هناك أي حيل CSS لتحقيق ذلك؟

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [13 يناير 2023، 10:37م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/74 "2023-01-13T22:37:45Z")

</div>

> [@rahim123](#):
>
> هل هناك أي حيل CSS لتحقيق ذلك؟

أعتقد أن الأمر يتجاوز ما يمكن أن يحققه CSS. لدى فريق discourse هذا في خارطة طريقهم، لكنه لا يحدث بسرعة (أعتقد):

> [@Ability to add a custom section of links to the sidebar](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778):
>
> We want to allow users to add a custom section of links to their sidebar. In a first pass for this feature, we plan to build upon the existing [sidebar preferences page](https://meta.discourse.org/my/preferences/sidebar), and allow a user to add a single custom section for these links. We think it can work something like this: checkbox for “Show Custom Section”. If checked Custom Section appears above Categories Section and values must have valid Name and at least one valid Link to “Save Changes” textbox for Name of the custom section (defaul…

---

<div class="post-metadata">

### Author: ![hosch](https://avatars.discourse-cdn.com/v4/letter/h/22d042/32.png) [@hosch](https://meta.discourse.org/u/hosch)
#### Post date: [25 يناير 2023، 3:39م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/77 "2023-01-25T15:39:30Z")

</div>

> [@rahim123](#):
>
> هل هناك أي اختصارات CSS لتحقيق ذلك؟

أنا أستخدم:

```js
<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"> Rechtliches </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>

```

يمكنك رؤية النتيجة على [https://forum.courservio.de/](https://forum.courservio.de/)  
النسخة _الأصلية_ من هذا الكود مأخوذة من [https://meta.discourse.org/t/add-custom-links-to-sidebar/246848](https://meta.discourse.org/t/add-custom-links-to-sidebar/246848). ربما يمكن أن تساعدك.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [25 يناير 2023، 5:13م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/78 "2023-01-25T17:13:42Z")

</div>

@hosch رائع، جميل جداً، هذا بالضبط ما كنت أبحث عنه! شكراً جزيلاً.

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [28 يناير 2023، 2:54م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/79 "2023-01-28T14:54:26Z")

</div>

@hosch هل من الممكن نقله إلى الأعلى؟ أود أن يظهر بعد قسم **المجتمع** ، أو ربما قبله.\n\n------------\n\n_ **تعديل:** _ _يبدو أنه ممكن مع تغيير على هذا:_\n_[Rearrange Existing Hamburger Menu Items - #3 by awesomerobot](https://meta.discourse.org/t/rearrange-existing-hamburger-menu-items/123098/3?u=rahim123*%5Cn%5Cn%60%60%60%5Cn.sidebar-sections) {\n display: flex; /_ Setup a flex layout so you can reorder things \*/\n flex-direction: column;\n .sidebar-section-community {\n order: -1;\n }\n}\n```\n\nأتساءل عن نقله إلى أعلى موضع؟

---

<div class="post-metadata">

### Author: ![rahim123](https://avatars.discourse-cdn.com/v4/letter/r/df705f/32.png) [@rahim123](https://meta.discourse.org/u/rahim123)
#### Post date: [28 يناير 2023، 5:06م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/80 "2023-01-28T17:06:55Z")

</div>

هناك خلل في هذه الطريقة حيث يختفي `div` المخصص عند تبديل رؤية الشريط الجانبي، على سبيل المثال إذا كانت نافذة المتصفح ضيقة. هذه مشكلة خاصة للأجهزة اللوحية، التي تحصل عادةً على إصدار سطح المكتب من Discourse وتتطلب النقر على قائمة الهامبرغر لعرض الشريط الجانبي. هل هناك أي حلول ممكنة؟ شكرًا!

* * *

_ **تعديل:** _ تم الحل هنا:

> [@Ability to add a custom section of links to the sidebar](https://meta.discourse.org/t/ability-to-add-a-custom-section-of-links-to-the-sidebar/239778/15?u=rahim123):
>
> @Ryan_Hyer Very nice! You figured out the way to make the items appear (or continue appearing) after the hamburger toggle event, which was the problem I was running into here: Your code is very orderly and clean too. Thanks to that I was able to hack it into displaying what I want in the Community menu without being hidden under More: Head: \<script\> const links = [ // FontAwesome icons may need to be added in the site settings if they don't correctly appear { title: "User Directory"…

---

<div class="post-metadata">

### Author: ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [26 فبراير 2023، 6:03م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/82 "2023-02-26T18:03:05Z")

</div>

شكراً @hosch و @Olivier_Lambert على إنجاز هذا.  
هل يمكنك أن تشرح لهذا المبتدئ أين يجب أن أدرج هذا؟ 🙏

---

<div class="post-metadata">

### Author: ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [26 فبراير 2023، 6:05م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/83 "2023-02-26T18:05:20Z")

</div>

كيف يمكنني إعادة ترتيب العناصر في قسم الشريط الجانبي / قائمة الهامبرغر؟

على سبيل المثال، أريد وضع “جميع الفئات” فوق الفئات في قسم “الفئات”، ونفس الشيء مع “جميع العلامات”.

شكرا لك!

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [26 فبراير 2023، 6:09م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/84 "2023-02-26T18:09:08Z")

</div>

> [@bquast](#):
>
> أين يجب أن أدرج هذا؟

هل تعرف الآن كيفية استخدام مكون لـ CSS، أليس كذلك؟ أضف ذلك في قسم الرأس.

> [@bquast](#):
>
> كيف يمكنني إعادة ترتيب العناصر؟

لا يمكنك ذلك بسهولة. على الأقل في الوقت الحالي. لم يتم الانتهاء منه وصقله بالكامل في الوقت الحالي.

---

<div class="post-metadata">

### Author: ![bquast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bquast/32/289307_2.png) [@bquast](https://meta.discourse.org/u/bquast)
#### Post date: [26 فبراير 2023، 7:20م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/85 "2023-02-26T19:20:48Z")

</div>

> [@Jagster](#):
>
> أضف ذلك في قسم الرأس

لقد جربت هذا، وأعطاني خطأ عند استخدام فاصلة منقوطة بالقرب من `src`.

دعنا نحاول مرة أخرى. شكرًا.

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [1 مارس 2023، 12:47ص UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/86 "2023-03-01T00:47:24Z")

</div>

> [@MarcP](#):
>
> أستخدم روابط داخلية في هذه المكونة، على سبيل المثال، لدي رابط يفتح دعوات المستخدم: /my/invited/pending/
> 
> عند فتح الرابط من الشريط الجانبي أحصل على: عفوًا! هذه الصفحة غير موجودة أو خاصة.

هذا لا يزال موجودًا، والحلول التي تلت ذلك لم تعالج المشكلة.

الإعداد: `Invite friends,/my/invited/pending/,f`

خارج الموضوع:

> [@asirota](#):
>
> ![image](https://global.discourse-cdn.com/meta/original/4X/b/5/0/b5034ffd72e0a04ba3334ab506f60db704dba5e8.png)
> 
> صورة1920×1032 126 كيلوبايت

لقد رأيت هذا التصميم للشريط الجانبي المضغوط من قبل، ولا يمكنني العثور عليه في أي مكان. هل هذه مكونة سمة؟

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [7 مارس 2023، 12:58م UTC](https://meta.discourse.org/t/custom-hamburger-menu-links/87644/87 "2023-03-07T12:58:55Z")

</div>

> [@bquast](#):
>
> أريد وضع “كل الفئات” فوق الفئات في قسم “الفئات”، ونفس الشيء مع “كل العلامات”.

يمكنك استخدام CSS هذا:

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

```

🙂

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/d/d/4dd69e74681f752620a779cfe49b9082f492b6dc.png)

[Previous page](https://meta.discourse.org/t/custom-hamburger-menu-links/87644.md?page=1)

[Next page](https://meta.discourse.org/t/custom-hamburger-menu-links/87644.md?page=3)