Toggling my sidebar component (mobile-version) not working

[rose basalt]

I created "IMREXX HUB" a project for a crypto hackathon (I lost unfortunately lol) the desktop version looks nice but on mobile devices, my sidebar component or Nav disappear i have been debugging for weeks but I can't find the problem. please I need help guys. I don't know why my toggle is not working.
SITE: https://imrexx-hub.vercel.app/
REPO: https://github.com/Imrexxx-OG/imrexxHub

PLEASE GUYS

[deep yoke]

The overflow is caused by your hero section, which has a display:flex property, stopping the elements inside it to wrap properly.

To fix this, add a flex-wrap: wrap property to your hero section and that will fix the problem.

[rose basalt]

Thank you so much for taking the time to help me debug. I appreciate it, bro. I just made the changes but i still can't see the nav/sidebar

[rose basalt]

Hello 😢

[deep yoke]

@rose basalt You have a media query that is hiding the navbar on smaller screens

[rose basalt]

Should I remove the display properly entirely? Or change it to hide on larger screens instead

[deep yoke]

Up to you, either works

[rose basalt]

I'm sorry for being late in my reply, man. I have tried it and it did not work so I have been debugging for hours now trying to find a solution. we just can't seem to find the bug😂

[burnt narwhal]

Use the dev tools inspector to see what styles are being applied to the nav bar at the screen size w the problem .

Do you know how to use your inspector?

[rose basalt]

I'm not that used to using. I have only used it to check for type of error and console logging value but I can check Google to see how it works

[rose basalt]

I used it and I could not find anything, unfortunately. The hamburger is supposed to be clicked on smaller screens so that the Nav appears and disappears but I don't even see any nav(sidebar component) on mobile screens. I can't even inspect on mobile screen size cause my nav does not even appear. It's like It's not even there. I took this screenshot while my page was in large screen size

[burnt narwhal]

the <nav> is still there in the DOM , you can see i have it highlighted and also you can see in the styles that once the screen is sized 768 or lower it has a media query style of position fixed anda left of 100% . if you take off the left property, you can see it.

[rose basalt]

Oh, I see it now. I'm not used to using dev tools please what can I do to fix the nav so my mobile version can work

[burnt narwhal]

depends how you want it to work on mobile, what are you trying to do ?

[rose basalt]

I just want users to be able to toggle it on mobile on and off so my nav will only appear when the user wants to go to another page. just like the screenshot you sent me.

In the first pic, there should be the hamburger(3 straight lines or crosses) in the top left. when you click it, the 2nd pic you sent should appear. click it again and it returns to 3 straight lines at its top left position

[burnt narwhal]

So you want it to slide in and out from the left ? Have you already written those keyframes and applied the classes or click functionality to the button? You probably want two separate buttons one to open it and one to close it burcause your current set up will have the nav menu sticking out and covering the main element at least for the width of the hamburger menu. I would put a separate button in the top left and when you click it the nav slides in , then the button in the top right of the nav will be the close button

[rose basalt]

I have applied everything to the hamburger. It just have to slide in and out by clicking on it. I have done something like this using javascript but using react has some issues. If you click my community on my nav. You can see that am toggling options under it.

About creating a close button, I don't know cause most nav on mobile devices are like what I want to do

[burnt narwhal]

It's not showing up for me on mobile, the hamburger menu

[rose basalt]

Only on desktop I noticed

[burnt narwhal]

But I would just toggle css classes and apply your keyfranes/styles with a class.

[rose basalt]

I wrote some keyframes for it too

But doesn't seem to work

[burnt narwhal]

What are your keyframes can you paste them in a code block please

You use 3 backticks

That opens the code block then another 3 at the end to close it

[rose basalt]

I should paste them here?

Haven't done anything like it but I will try

[burnt narwhal]

Yes just paste the keyframes you wrote

[rose basalt]

Might the problem be in my resct code I.e sidebar.jsx component instead of style.css

[burnt narwhal]

Just normal copy and paste but with three backpacks at the start and end.

[burnt narwhal]

Im not sure what this mean if it's a question or a statement

[rose basalt]

Am just thinking 😂

@media (max-width: 768px) {
  .hamburger {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
  }

  nav {
    position: fixed;
    top: 0;
    width: 70%;
    left: -100%;
    height: 100%;
    background-color: black;
    transition: left 0.3s ease;
    z-index: 999;
  }

  .sidebar-open nav {
    left: 0;
  }

  /* .navbar {
    display: none;
  } */

  .navbar.show {
    display: flex; /* Show navbar when toggled */
    flex-direction: column;
    gap: 20px;
  }

  /* .navbar.hide {
    display: none;
  } */
}

How is it bro

[burnt narwhal]

I’m not sure what’s happening. Will the .sidebar-open class be added to the nav’s parent as well as a .show class added to the nav ? Why wouldn’t you just want one class to be added and removed to one element ? There’s also two selectors , is nav and .navbar different elements ?

Assuming .navbar.hide and .navbar are commented out because they are not part of the solution

[rose basalt]

The navbar is inside my nav element. Please look at my GitHub repo whenever you are free. I created the project months ago and now I don't understand what's happening

https://github.com/Imrexxx-OG/imrexxHub

[burnt narwhal]

Okay, still doesn’t answer my question though - why would you want to have two selectors ? One on .sidebar-open (which looks like a parent of the nav so either .container or body) and then toggling a .show class on .navbar?

[rose basalt]

Honestly I think it's a mistake. I can't remember even putting it 😅🙏

It's been a while so you probably know more about the code than me 😭😭

[burnt narwhal]

i just cloned the repo. what/where is getting the .sidebar-open class? im not seeing it update on the liove server and dont see anything that adds or removes that class

[burnt narwhal]

I think the best approach is making a component that holds the mobile menu and adding in the top left corner , it would be a direct child of the App component so it's there no matter which page/route is active (Alternatively could add to each route component but that seems unnecessary). Then set it to only show if screen width<768 (I believe that was your chosen breakpoint). This buttons only job will be to open the sidebar component, im not sure where the .sidebar-open class was but basically on the div that wraps the whole sidebar component, this will get a class that sets the left:0 and transitions it. Then the hamburger menu button inside the sidebar will no longer be a hamburger menu but the X and its only job will be to close the sidebar by removing this class.

With the current setup I think that's the best way to handle it. Would be better if there was only one button that toggled but when the sidebar is open it will cover the new MobileMenu component.

[burnt narwhal]

Okay i tried to create a new branch and push to it but created a fork instead which im not really sure what that means but here is the branch. You can use a pull request to compare all the changes but it should be pretty straightforward. I put most of the changes at the bottom of the stylesheet but there was a few things i commented out or deleted before i remembered i was working on this for someone else and needed to be more mindful. They were styles that no longer applied. https://github.com/clevermissfox/imrexxHub/tree/clevermissfox/changes

added you as a contributor , ill be deleting this repo in a few days so lmk when youve forked the branch or grabbed the changes you want to keep

[rose basalt]

It's in the sidebar component. Check the component folder. You'll see it there

[rose basalt]

A direct child of App component that only appears if a particular set of conditions is met. I have done something like that with my showcase component, if you click one of the images there an window component appears. It also has a close button

[rose basalt]

I can download and work on it locally. I will study it and see where I went wrong. I would also like to see how you went about the problem then I can add the changes manually while learning

[rose basalt]

Thank you so much, Ceecee. Am sorry for being so much trouble. Will try to learn from this

[rose basalt]

@burnt narwhal you created a branch here and made changes. I'm going through them right now

[rose basalt]

@burnt narwhal bro, I LOVE YOU 😂
You have no idea how long i have been trying to fix this

2 MONTHS, 2 DAMN MONTHS

https://tenor.com/view/anime-gif-10271429305488134245

Thank you so much

It look so perfect

[rose basalt]

I was complicating things while you solved it in such a simple way😊

I noticed i made a big mistake in sidebar.js class="hamburger" but it should have been className="hamburger"

[burnt narwhal]

Yes I happened to have noticed that but I’m surprised linting didn’t highlight it. I think some of my vs code extensions are screwed up since I reset my network connection. But that’s an easy mistake to make , we all do especially when copying over html.

Glad you’re happy with the output , had it been built a little differently I would’ve just used one button but I think it’s a fair compromise to have two. You could also configure it a little to make it look more like one button but for a quick and dirty solution I think it works.

I think I was able to create a new branch on your repo but not push to it so ended up forking the whole thing. Make sure on your repo you’ve populated the branch or created a new one or changed your main one etc with the changes you want to keep from the repo I linked as I’ll be deleting it from my GitHub this week. I gave your username full permissions to do whatever you need to do.

[rose basalt]

If you don’t mind me asking. What kind of VS code extensions are you using for picking up such mistakes.

I would prefer to use one button too but everything works out. Users wouldn't even notice anything different. It's the dev working behind the scenes that knows what happening 😂

I actually went through all the changes you made, saw where I messed up and applied those changes code by code to my master branch after analysing them. It's was such an eye opener. Sometimes it's just better to think in a simple way and not complicate things.

I'll be adding some polishing especially to the showcase component. Make everything more responsive. If I had submitted this version, I probably might have won the hackathon 😂

Thank you, Misscleverfoxx can you please accept my friend request 🙏 😊

@deep yoke thanks bro for the help too. I wouldn't have noticed the mistake I made in the home component

[burnt narwhal]

Accepted ! What was the hackathon you submitted this for ?

Eslint is the main extension then there are some node packages for eslint and react specifically, vite-plugin-eslint and eslint-config-react-app

[rose basalt]

Hackmeter organised by Meter mainnet, a side chain on ethereum. Unfortunately I didn't win 😂

Thank you for the extensions. I just started working with react in April so I don't know much of this extensions. Will download them

[rose basalt]

made some minor changes. looking good now

[burnt narwhal]

Also extensions like react snippets can be helpful to workflow . So you’d create a new file “Sidebar.jsx” and then put in the snippet e.g. rfc and it populates your file

function Sidebar(){
return ( )
}
export default Sidebar

They have a list of snippets like for the above example react functional component , then one for react class component, react styled component etc:

Alternatively create your own customized snippets in javascriptreact.json if you only want a few and that’s one less extension. You used to put all snippets into a snippets.json but now scope property is removed and you stick each snippet in the file with the relevant language

[burnt narwhal]

Awesome ! Also I wanted to make sure .hamburger a button not a div for semantics and accessibility but didn’t have any more time to spend on it. If you continue to adapt and make changes to this project , that’s one piece I would like change , then of course will have to change some styles of you don’t have button in your global reset. Like taking away the default border and making it a display block , setting font: inherit etc

[burnt narwhal]

So jist want to doubt triple check you're not replying on the repo https://github.com/clevermissfox/imrexxHub/tree/clevermissfox/changes ?

That you have all the changes you wanted to save on your own repo and I'm clear to delete my forked repo?

[rose basalt]

Please, go ahead. I already downloaded it and made the changes I wanted. Thank you so much

[burnt narwhal]

Perfect thx for confirming