feat(Toggle): bug fixes for TabsBar.vue | #222

[NayakPenguin]

Fixes #222

Describe the changes you have made in this PR -

1. TabsBar.vue :

• I incorporated a toggle button in the top-right corner.
• The toggle functionality is height-based, concealing surplus tabs using overflow.

2. Extra.vue :

• Serving as the parent of TabsBar.vue, I introduced a prop to monitor clicks within the simulator space.
• This prop facilitates toggling the TabsBar back to its default initial height upon a click within the simulator space.

3. Toggle effect logic & prop communication between Extra.vue and TabsBar.vue :

Screenshots of the changes (If any) -

Screen.Recording.2023-12-25.at.11.22.26.AM.mov

Few extra minor changes -

Changes are made to make the vue simulator be consistent with the main simulator.

1. Adjusted the tabs bar to a smaller height.

2. Ensured uniform alignment and transformed buttons into squares.

3. Reduced the size of the close button.

Note: Please check Allow edits from maintainers. if you would like us to assist in the PR.

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	fa1d815
🔍 Latest deploy log	https://app.netlify.com/sites/circuitverse/deploys/65a6ca6b9694710008ecabca
😎 Deploy Preview	https://deploy-preview-223--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[NayakPenguin]

@Arnabdaz @Prerna-0202 please review

[Arnabdaz]

@NayakPenguin don't put any javascript in extra.vue try putting the logics in tabsbar.vue

[NayakPenguin]

@Arnabdaz But that way we can't do the second part of objective 4 in issue #222 selecting the circuit space portion should revert the tabs to their default state., apart from that everything can be done.

Reason : I need the information that the circuit space/simulator has been clicked make the height of tabsbar go back to normal.

I think if we don't want part II of object 4 then we don't need JS in Extra.vue, and in my opinion selecting the circuit space portion should revert the tabs to their default state is not a imp feature.

Please suggest if there is some other way out.

[NayakPenguin]

@Arnabdaz done