Custom hamburger menu links

[Johani]

This is a theme component that will allow you to easily add links the hamburger menu.

---

Repository link
https://github.com/hnb-ku/discourse-custom-hamburger-links

Preview:

'Hamburger links component' by @Johani

---

Samples

Desktop

Mobile

---

Settings

You add links via comma delimited values in this order:

Text,URL,Location

Text
is the name of the link that shows on the menu.

URL
is the path you want the link to have. You can use relative paths like

/tags/funny
or
/t/231

if you prefer.

Location
can have one of two values. Either the letter g or the letter f

Use “g” if you want the link to appear in the generalLinks section:

or use “f” if you want the link to appear in the footerLinks section:

---

How do I install this theme?

follow the official theme installation guide here:

How do I install a Theme or Theme Component?

Importing new themes and theme components To import new themes and components, visit www.yoursite.com/admin/customize/themes or via the UI head to Admin > Customize > Themes Then click on import here [1800] you’ll see this [import-modal] You can then import theme files from your device or via a theme repository link. The repository link for each theme is provided by the author on the theme topic. There are also options to import from a specific branch and to specify whether the repository…

Then add the component to your theme as a theme component and you’re all set!

[NemesisRE]

Thats a nice addition, thanks for that. It’s already installed

Could you add a target option so that it is possible to open the link in a new tab/window (if no target is given just use “_self”)

Text,URL,Location,Target

[davidkingham]

Any idea why this wouldn’t show up in my list of theme components?

I tried rebuilding the app twice and haven’t any problems with other plugins

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/angusmcleod/discourse-topic-previews.git
          - git clone https://github.com/davidtaylorhq/discourse-whos-online.git
          - git clone https://github.com/davidtaylorhq/discourse-category-lockdown.git
          - git clone https://github.com/hnb-ku/discourse-custom-hamburger-links.git

[Johani]

I believe you followed the plugin installation instructions to install the theme. It won’t work that way.

You should install it as a theme. It would then show up in your list of themes.

[davidkingham]

Now I feel stupid, I was in plugin installation mode. Thank you sir!

[Sami_Syed]

Is it possible to separate custom added menu links with the grey line?

[helmi]

Any idea why the forum doesn’t render at all as soon as I add this component to my theme?

Using the default theme without a lot modification and your navigation links component (which works fine).

[Johani]

Is it possible to separate custom added menu links with the grey line?

Possibly, yes @Sami_Syed but it’s beyond the scope of this theme.

Any idea why the forum doesn’t render at all as soon as I add this component to my theme?

Not sure @helmi, I just checked and everything seems ok

Are you seeing any errors in the browser console?

[helmi]

Are you seeing any errors in the browser console?

Yeah, “ReferenceError: loc is not defined”

Problem is that I can’t even disable it now as the admin area is affected, too.

[Johani]

You can use safe-mode to disable your current theme.

go to

your.site.com/safe-mode

More on that here

How to use Discourse Safe Mode

Discourse has a “JavaScript Safe Mode” any user can use to isolate the root cause of a JavaScript issue. To access safe mode go to: http://your-site-name/safe-mode for example this is the safe mode for meta: https://meta.discourse.org/safe-mode [image] To exit safe mode simply close your browser tab When entering safe mode you can select between: Disable all site customizations Disable unofficial plugins Disable official plugins By default all 3 options are selected, but you c…

[helmi]

You can use safe-mode to disable your current theme.

Thanks, that helped me out. I still can’t figure out what’s wrong. It doesn’t even matter if I put links in the settings or not - tried external and internal links. Weird.

Also tried removing all other components (Nav Links component only) but that didn’t change anything. As soon as I add this component rendering breaks.

[Johani]

I just pushed a small fix. Please update the theme and then try again and let me know what happens.

[helmi]

Thanks, that fixed it. Additionally I found out that I had used semi colons as separator instead of commas

[merefield]

Additionally I found out that I had used semi colons as separator instead of commas

Yes, I did the same thing - but that’s in the help text below, not sure why … can these be updated to commas?:

Comma delimited in this order: Text;URL;Location. Text is what appears on the menu. URL is the path for the link. Location is where you want the link to appear. There are two options "g" for generalLinks and "f" for footerLinks.

[Johani]

My bad those should be commas indeed. This is fixed.

[merefield]

Thanks Joe.

As a general point, it would be great if at some point these could be given custom CSS support so we could differentiate them more on the menu and highlight.

[Johani]

Sure, there are now two classes added to each link you insert with this theme. The first one is applied to all links

custom-hamburger-link

and the second one is applied to each individual link and is derived from its text. So a link with the text

footer link

would now have the class

footer-link added to it.

[merefield]

So this works already?! Awesome!

So if I have a single word link, e.g. ‘Welcome’ that can be styled with the .Welcome class? Is this in any way nested?

One more Q: if I may: Can I declare that class in a separate Theme component or must place it in the Hamburger Link Component?

[Johani]

Yes, this works now, just be sure the theme component is updated.

So if I have a single word link, e.g. ‘Welcome’ that can be styled with the .Welcome class?

Yes you can, but that would be a very generic selector, so it’s better to make it a little bit more specific by including the other class. Instead of

.welcome {
  // properties
}

you can use

.custom-hamburger-link.welcome {
  // properties 
}

Note the lack of space between the selectors.

One more Q: if I may: Can I declare that class in a separate Theme component or must place it in the Hamburger Link Component?

This should also be fine, you can style the links in any theme component. The styles don’t need to be added to this theme component - and nor should they since updates would remove any custom code you add to it.

[merefield]

This should also be fine, you can style the links in any theme component.

Great, that way I don’t wipe out the CSS with an update.

And, btw, have that all working, thanks so much Joe!!!

This is a really nice, tidy, solution that dovetails with & leverages the existing design, great!