Added Mode Toggler

[VijaySamant4368]

Related Issue

#560

Description

Made the mode toggler with SVG images that changes based on the mode.

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Screenshots / videos (if applicable)

Uploading Screen Recording 2024-07-19 201325.mp4…

Checklist:

• I have performed a self-review of my code
• I have read and followed the Contribution Guidelines.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have commented my code, particularly in hard-to-understand areas.

Additional context:

This pr is under GSSoC 2024. Please label it with appropriate labels.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[VijaySamant4368]

@CSEdgeOff please review and merge this pr

[Durgesh-Vaigandla]

@VijaySamant4368 Add the screenshots of the outputs in different views

[VijaySamant4368]

After that small change, the Screenshots would be as follows:

At full screen

Width 1500px

Width 1000px

Width 500px

Width 300px

Although making it responsive for even smaller screen width is unnecessary, I can make it responsive, but I would have to change the other parts of the source-code.

[VijaySamant4368]

@Durgesh-Vaigandla, please kindly check.

[Durgesh-Vaigandla]

@VijaySamant4368 in mobile view incorporate the button inside the navbar I mean if the nav is open the button would display

[VijaySamant4368]

@Durgesh-Vaigandla, do you mean that I have to add the Toggle-Button in the drop down menu?
"If the user press the three lines(hamburger) button, then only the Toggle Mode should show" Is this what you mean?

[Durgesh-Vaigandla]

@VijaySamant4368 yeah exactly

[VijaySamant4368]

@Durgesh-Vaigandla it may take some time.

[VijaySamant4368]

Should I make it such that it is outside till the width is say 500px, but if it is less than that, it goes inside.
As the nav-bar would have a lot of empty space.
@Durgesh-Vaigandla

[VijaySamant4368]

@Durgesh-Vaigandla will these suffice?

For width less than 1100px, it is still same

The nav-Bar

Inside Hamburger

Pressing the 'Toggle Mode' toggles the mode and closes the hamburger.

[VijaySamant4368]

@Durgesh-Vaigandla please label this as GSSoC Level 3

[VijaySamant4368]

@Durgesh-Vaigandla @CSEdgeOff please kindly checkout this pr

[github-actions]

This issue has been automatically closed because it has been inactive for more than 30 days. If you believe this is still relevant, feel free to reopen it or create a new one. Thank you!