fix: sidebar links in mobile

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
 	}

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
 	}