Fix closing animation on sideNav

[kmrinal19]

Summary

This fixes the closing animation on sideNav. Earlier, closing the sideNav caused it to disappear immediately.

References

This pull request is a fix for #7700

Contributor Checklist

PR process:

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Testing:

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

Reviewer Checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[jonboiser]

Thanks, this looks good!

Do you think you would be able to experiment with giving the backdrop a transition too? For example, give it a fade out animation. Now that I see it, the immediate change from opaque and black to transparent is also very sudden.

kolibri/kolibri/core/assets/src/views/SideNav.vue

Lines 112 to 118 in 1273cc0

	<div
	v-show="navShown"
	class="side-nav-backdrop"
	@click="toggleNav"
	>
	</div>

[kmrinal19]

Thanks, this looks good!

Do you think you would be able to experiment with giving the backdrop a transition too? For example, give it a fade out animation. Now that I see it, the immediate change from opaque and black to transparent is also very sudden.

kolibri/kolibri/core/assets/src/views/SideNav.vue

Lines 112 to 118 in 1273cc0

	<div
	v-show="navShown"
	class="side-nav-backdrop"
	@click="toggleNav"
	>
	</div>

Yeah sure..

[kmrinal19]

@jonboiser I pushed the code for backdrop animation too 2 days ago. Can you please review the changes?

[jonboiser]

This is a very nice improvement. Thanks!