Custom hamburger menu links

theme-component

(Joe) #1

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:
https://theme-creator.discourse.org/theme/Johani/hamburger-links


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:

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


Login Required activated - after successfull login it transfers you to nonexisting page
Navigation - Add custom menu items
How can i add custom hamburger menu
ProCourse Static Pages
Heading for group of categories
(Steven) #2

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

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


(David Kingham) #3

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

(Joe) #4

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.


(David Kingham) #5

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


(Sami Syed) #6

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


Category for Threads with zero replies?
(Helmi) #7

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).


(Joe) #8

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

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

Are you seeing any errors in the browser console?


(Helmi) #9

Yeah, “ReferenceError: loc is not defined”

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


(Joe) #10

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

go to

your.site.com/safe-mode

More on that here


(Helmi) #11

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.


(Joe) #12

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


(Helmi) #13

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


#14

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.


(Joe) #15

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


#16

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.


(Joe) #17

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.


#18

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?


(Joe) #19

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

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.

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.


#20

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!