From 93161b827885f9be44b353956cc9b3c9c80e0401 Mon Sep 17 00:00:00 2001 From: Jannat Patel Date: Mon, 6 Apr 2026 16:19:52 +0530 Subject: [PATCH] fix: sidebar links in mobile --- frontend/src/components/MobileLayout.vue | 109 +++++++++++------------ frontend/src/utils/index.js | 24 ++--- 2 files changed, 64 insertions(+), 69 deletions(-) diff --git a/frontend/src/components/MobileLayout.vue b/frontend/src/components/MobileLayout.vue index 8aa5a5dc..1015b7c8 100644 --- a/frontend/src/components/MobileLayout.vue +++ b/frontend/src/components/MobileLayout.vue @@ -57,7 +57,7 @@ import { getSidebarLinks } from '@/utils' import { useRouter } from 'vue-router' import { call } from 'frappe-ui' -import { watch, ref, onMounted } from 'vue' +import { ref, watch } from 'vue' import { sessionStore } from '@/stores/session' import { useSettings } from '@/stores/settings' import { usersStore } from '@/stores/user' @@ -68,26 +68,13 @@ let { isLoggedIn } = sessionStore() const { sidebarSettings } = useSettings() const router = useRouter() let { userResource } = usersStore() -const sidebarLinks = ref(getSidebarLinks()) +const sidebarLinks = ref([]) const otherLinks = ref([]) const showMenu = ref(false) const menu = ref(null) const isModerator = ref(false) const isInstructor = ref(false) -onMounted(() => { - sidebarSettings.reload( - {}, - { - onSuccess(data) { - destructureSidebarLinks() - filterLinksToShow(data) - addOtherLinks() - }, - } - ) -}) - const handleOutsideClick = (e) => { if (menu.value && !menu.value.contains(e.target)) { showMenu.value = false @@ -126,65 +113,57 @@ const filterLinksToShow = (data) => { const addOtherLinks = () => { if (user) { - otherLinks.value.push({ - label: 'Notifications', - icon: 'Bell', - to: 'Notifications', - }) - otherLinks.value.push({ - label: 'Profile', - icon: 'UserRound', - }) - otherLinks.value.push({ - label: 'Log out', - icon: 'LogOut', - }) + addLink('Notifications', 'Bell', 'Notifications') + addLink('Profile', 'UserRound') + addLink('Log out', 'LogOut') } else { - otherLinks.value.push({ - label: 'Log in', - icon: 'LogIn', - }) + addLink('Log in', 'LogIn') } } -watch(userResource, () => { - if (userResource.data) { - isModerator.value = userResource.data.is_moderator - isInstructor.value = userResource.data.is_instructor - addPrograms() - if (isModerator.value || isInstructor.value) { - addProgrammingExercises() - addQuizzes() - addAssignments() +const addLink = (label, icon, to = '') => { + if (otherLinks.value.some((link) => link.label === label)) return + otherLinks.value.push({ + label: label, + icon: icon, + to: to, + }) +} + +const updateSidebarLinks = () => { + sidebarLinks.value = getSidebarLinks(true) + destructureSidebarLinks() + sidebarSettings.reload( + {}, + { + onSuccess: async (data) => { + filterLinksToShow(data) + await addPrograms() + if (isModerator.value || isInstructor.value) { + addQuizzes() + addAssignments() + addProgrammingExercises() + } + addOtherLinks() + }, } - } -}) + ) +} const addQuizzes = () => { - otherLinks.value.push({ - label: 'Quizzes', - icon: 'CircleHelp', - to: 'Quizzes', - }) + addLink('Quizzes', 'CircleHelp', 'Quizzes') } const addAssignments = () => { - otherLinks.value.push({ - label: 'Assignments', - icon: 'Pencil', - to: 'Assignments', - }) + addLink('Assignments', 'Pencil', 'Assignments') } const addProgrammingExercises = () => { - otherLinks.value.push({ - label: 'Programming Exercises', - icon: 'Code', - to: 'ProgrammingExercises', - }) + addLink('Programming Exercises', 'Code', 'ProgrammingExercises') } const addPrograms = async () => { + if (sidebarLinks.value.some((link) => link.label === 'Programs')) return let canAddProgram = await checkIfCanAddProgram() if (!canAddProgram) return let activeFor = ['Programs', 'ProgramDetail'] @@ -198,7 +177,21 @@ const addPrograms = async () => { }) } +watch( + userResource, + async () => { + await userResource.promise + if (userResource.data) { + isModerator.value = userResource.data.is_moderator + isInstructor.value = userResource.data.is_instructor + } + updateSidebarLinks() + }, + { immediate: true } +) + const checkIfCanAddProgram = async () => { + if (!userResource.data) return false if (isModerator.value || isInstructor.value) { return true } diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js index 198d8c87..4be629cb 100644 --- a/frontend/src/utils/index.js +++ b/frontend/src/utils/index.js @@ -403,8 +403,8 @@ export function getUserTimezone() { } } -export function getSidebarLinks() { - let links = getSidebarItems() +export function getSidebarLinks(forMobile = false) { + let links = getSidebarItems(forMobile) links.forEach((link) => { link.items = link.items.filter((item) => { @@ -419,7 +419,7 @@ export function getSidebarLinks() { return links } -const getSidebarItems = () => { +const getSidebarItems = (forMobile = false) => { const { userResource } = usersStore() const { settings } = useSettings() @@ -441,7 +441,7 @@ const getSidebarItems = () => { icon: 'Search', to: 'Search', condition: () => { - return userResource?.data + return !forMobile && userResource?.data }, }, { @@ -449,7 +449,7 @@ const getSidebarItems = () => { icon: 'Bell', to: 'Notifications', condition: () => { - return userResource?.data + return !forMobile && userResource?.data }, }, ], @@ -476,7 +476,7 @@ const getSidebarItems = () => { activeFor: ['Programs', 'ProgramDetail'], await: true, condition: () => { - return checkIfCanAddProgram() + return checkIfCanAddProgram(forMobile) }, }, { @@ -514,7 +514,8 @@ const getSidebarItems = () => { : settings.data?.contact_us_email, condition: () => { return ( - (settings?.data?.contact_us_email && + (!forMobile && + settings?.data?.contact_us_email && userResource?.data) || settings?.data?.contact_us_url ) @@ -531,7 +532,7 @@ const getSidebarItems = () => { icon: 'CircleHelp', to: 'Quizzes', condition: () => { - return isAdmin() + return !forMobile && isAdmin() }, activeFor: [ 'Quizzes', @@ -546,7 +547,7 @@ const getSidebarItems = () => { icon: 'Pencil', to: 'Assignments', condition: () => { - return isAdmin() + return !forMobile && isAdmin() }, activeFor: [ 'Assignments', @@ -559,7 +560,7 @@ const getSidebarItems = () => { icon: 'Code', to: 'ProgrammingExercises', condition: () => { - return isAdmin() + return !forMobile && isAdmin() }, activeFor: [ 'ProgrammingExercises', @@ -581,10 +582,11 @@ const isAdmin = () => { ) } -const checkIfCanAddProgram = () => { +const checkIfCanAddProgram = (forMobile = false) => { const { userResource } = usersStore() const { programs } = useSettings() if (!userResource.data) return false + if (forMobile) return false if (userResource?.data?.is_moderator || userResource?.data?.is_instructor) { return true }