Fishing Diary Website With Slide In Nav

I was messing about with making a slide in from the left navbar. It’s not gonna be online for long. It’s for my own reference for my future fishing expeditions. Anyway this is it until I get the rods out and start fishing.

2022 Angling Diaries

All fish are handled with care and released to fight another day.

3 Likes

That’s pretty slick, any chance you might share it in the online components? bats eyes ridiculously lol

@jo-r You just want a sidebar that slides in from left to right and when closing its sliding out to the left?

@jo-r It’s now a shared component named Slide In Left Nav

Just tried uploading the full site as a component. I tried this ages ago but there was a limit on the component upload size. This time It worked. Basically just dragged everything on the site into a div, right clicked the div and added to library. A handy way to save a full site as a template.

The shared component is named Full Site

Now - Is there any way to delete an uploaded component or edit the uploaded component?

I don’t think that you can - I’ve tried before to edit an uploaded component with no luck, it would be good if we could, and I think someone requested it a few months ago.

Also, to run this without jquery ad an id of navicon to your eye icon and then replace the jquery with :

 document.getElementById('navicon').addEventListener("click", () => {
 var n = document.getElementById("nav");
  n.classList.toggle("aside-slide-in-left");

  var m = document.getElementById("main");
  m.classList.toggle("main-slide-over");
});

Hi Richards. I used jQuery really just because it’s shorter. I never thought about having to enable it in the settings when it’s added as a component to a new site. :crazy_face: In future I’ll write some javascript instead. Thanks for pointing that out.

I’ve added a post for Martin about editing, deleting or overwriting components. Hopefully he can sort something out for us :sunglasses:

Thanks guys, most appreciated for the share!

@dickykreedz I have one that works pretty slick on mobile size, but nothing nice like @floydmanfloyd’s slide in for desktop too. Very slick indeed!

Just downloaded it and works slick with that javascript edit. Thanks so much!

@jo-r If you will ever need something related to javascript or sum, like more interactive interface or sum not built in bss you can hit me in dms and ask about it and i will see what can i do.

Made a few modifications to make the nav 100% wide on mobile devices, replaced the jQuery code with some javascript so jQuery not needed as @richards suggested (Thanks again richards).

var eye = document.getElementById("eye");

eye.addEventListener("click", function() {
    var nav = document.getElementById("nav");
    var main = document.getElementById("main");

    if (window.matchMedia("(min-width: 768px)").matches) {
        nav.classList.toggle("aside-slide-in-left");
        main.classList.toggle("main-slide-over");
    } else if (window.matchMedia("(max-width: 768px)").matches) {
        nav.classList.toggle("aside-sm-slide-in-left");
        main.classList.toggle("main");
    }
});

Added a new class .aside-sm-slide-in-left and altered a couple of the other ones. All good now. Happy days :grinning:

1 Like

@floydmanfloyd you are more than welcome, I must admit, I have been having fun adapting your element and adding a few options to it.

@richards Be interesting to see what you’ve done. :grinning: My next thing (may be a bit above my limited coding skills) is to make a form where I can input all my trip details and add it to the relevant page when I’m not catching any fish. :rofl: :rofl: :rofl: I’m thinking on the lines of incorporating a json file. Not sure if that’ll work but it’s all trial and error. I didn’t think this CSS line would work but it does.

transform: translate(calc(-100% + 65px));

Lol, looks like we were working along the same (fishing) lines :slight_smile:
image

What I have so far:

https://mydev.bss.design/

:rofl: :rofl: :rofl: Like the pun. Hopefully the devs can do something with the fish online components. Fingers crossed. :hand_with_index_finger_and_thumb_crossed:

Its outragous that they didn’t add it to the latest version :wink:

I’ve also been experimenting with the custom options:

I’ve not really done much with the custom options. I’ll have to give them a good look and start experimenting too.

I can think of something useful for this. Changing width, height, scale, text size, colors, etc of elements. Yip. Gonna use this more.

Wow I go away for a couple hours and come back to all this jibber jabber LOL.

@dickykreedz thanks much for the offer, I will keep it in mind if I get stuck with something hehe. Happens every so often. Course sometimes I get ideas in my head that seem like they shouldn’t be too hard to do and they are actually impossible so … yeah … there’s that too lol. Appreciate the help guys. :slight_smile:

I haven’t played at all with the custom options either, haven’t taken the time to even see what they are for. Sounds like it might be time to do that too.

@jo-r I will sit down soon and will try to make the offcanvas menu swipable etc with custom options cause I have idea for it also I’m planning to release some small components and make some sort of Component Library with them with full website, but I have just few ideas for components, so any suggestions will be appreciated :sweat_smile:

Kuli and I played around with something similar to this about a year ago, but I never really finished it. I did add it to the online components if anyone wants to use it or modify it.

It’s called Ultimate Sidebar Menu BS5

Here’s a working example…
https://thelightwavegroup.com/sidebar/

In addition to the close icon, you can click/tap anywhere on the screen outside the menu to close it.

1 Like