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
• [x] Feature enhancement
• [ ] Documentation update
• [ ] Other (specify): ___

Screenshots / videos (if applicable)

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

Checklist:

• [x] I have performed a self-review of my code
• [x] I have read and followed the Contribution Guidelines.
• [x] I have tested the changes thoroughly before submitting this pull request.
• [x] I have provided relevant issue numbers, screenshots, and videos after making the changes.
• [x] 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[bot]]

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[bot]]

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!