Add Swipe Gesture Support for Side Navigation in Kolibri #13177
Conversation
yashhash2
changed the title
Build Artifacts
|
|
Swipe works as expected in both RTL and LTR, good job @yashhash2 ! 👏🏽 APK asset tested on Android 12 phone. Interaction is smooth and swipe width seems enough even for a fat-finger person like me 😅
|
| <div | ||
| v-if="windowIsSmall" | ||
| ref="swipeZone" | ||
| :class="{ 'rtl-swipe-zone': isRtl.value }" |
There was a problem hiding this comment.
You shouldn't need to reference the .value attribute in a template, isRtl should suffice.
| opacity: 0; | ||
| } | ||
|
|
||
| .rtl-swipe-zone { |
There was a problem hiding this comment.
I don't think this is necessary - our RTLCSS processing creates a separate CSS asset for RTL rendering which flips the left attribute above to right.
You may have needed this during testing if you were using devserver-hot - but if you test with CSS assets actually being built, I think you'll find this isn't necessary.
| @@ -266,6 +267,8 @@ | |||
| import useNav from 'kolibri/composables/useNav'; | |||
| import useUser from 'kolibri/composables/useUser'; | |||
| import useUserSyncStatus from 'kolibri/composables/useUserSyncStatus'; | |||
| import { useSwipe } from '@vueuse/core'; | |||
| import { ref, onMounted, getCurrentInstance } from 'vue'; | |||
There was a problem hiding this comment.
Linting is failing because onMounted here is not used.
yashhash2
force-pushed
the
my-awesome-changes
branch
from
f0919fd to
61c116f
Compare
|
Hey @rtibbles yes you are right RTLCSS handles the left to right positioning of swipe-zone, I have done the required changes please take a look : ) |
|
Confirming that the swipe works as expected with the APK that includes the latest changes, good to go! 🚀 |
|
Thanks @yashhash2, this is a very nice update |
|
Thank you @MisRob , @radinamatic and @rtibbles for your review and help throughout, looking forward to contribute more : ) |
Summary
This PR introduces swipe gesture support for toggling the side navigation menu, enhancing the mobile user experience. The feature leverages useSwipe from @vueuse/core, ensuring seamless navigation for touch-screen devices. The implementation is non-intrusive and retains the existing navigation methods.Here is small GIF representing the change
References
ISSUE: swipe from left to open side nav on mobile #6899
Summary of changes:
1)Added swipe-to-open functionality for the side navigation menu.
2)Integrated useSwipe from @vueuse/core to manage swipe detection.
3)Implemented swipe gestures in two key components:
Main Wrapper: Swipe right to open the side navigation.
Side Navigation: Swipe left to close the navigation.
4) Provided RTL support using isRTL.
Reviewer guidance
Reviewers can test these changes by using kolibri app mode.
Q Is width for swipe zone fine or it needs some refinements?