feat: Remove Top Bar In Mcq Page

audire/audire-mobile-app/src/app/(auth)/_layout.tsx

@@ -1,5 +1,5 @@
 import { UserProvider } from '@learning-app/auth';
-import { router } from 'expo-router';
+import { router, useSegments } from 'expo-router';
 import { Stack } from 'expo-router/stack';
 import { useState } from 'react';
 import Topbar from '../../modules/common/Topbar';
@@ -8,20 +8,26 @@ import Sidebar from '../../modules/common/sidebar/Sidebar';
 const MainLayout = () => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
 
+  const segments = useSegments();
+  const hideTopbarSegments = ['(auth)/mcq-exams/[topic]'];
+
+  const hideTopbar = hideTopbarSegments.indexOf(segments.join('/')) >= 0;
+
   return (
     <UserProvider onUnauthorized={() => router.replace('/login')}>
-      <Topbar onToggleSidebar={() => setSidebarOpen(prev => !prev)} />
+      {!hideTopbar && (
+        <Topbar onToggleSidebar={() => setSidebarOpen((prev) => !prev)} />
+      )}
 
       <Sidebar isOpen={isSidebarOpen} setIsOpen={setSidebarOpen} />
       <Stack
-        initialRouteName='/'
+        initialRouteName="/"
         screenOptions={{
-          header: () => null
+          header: () => null,
         }}
       />
     </UserProvider>
   );
-
-}
+};
 
 export default MainLayout;

audire/audire-mobile-app/src/app/_layout.tsx

@@ -2,6 +2,7 @@ import { Slot } from 'expo-router';
 import { GluestackUIProvider, Box } from '@gluestack-ui/themed';
 import { config } from '@gluestack-ui/config';
 import { ExpoSupabaseProvider } from '@learning-app/supabase-expo';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const audireConfig = {
   ...config,
@@ -37,19 +38,24 @@ const audireConfig = {
   },
 } as const;
 
-const RootLayout = () => (
-  <ExpoSupabaseProvider>
-    <GluestackUIProvider config={audireConfig}>
-      <Box
-        width="100%"
-        flex={1}
-        flexDirection="column"
-        justifyContent="flex-start"
-        alignItems="stretch"
-      >
-        <Slot />
-      </Box>
-    </GluestackUIProvider>
-  </ExpoSupabaseProvider>
-);
+const RootLayout = () => {
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <ExpoSupabaseProvider>
+      <GluestackUIProvider config={audireConfig}>
+        <Box
+          width="100%"
+          flex={1}
+          flexDirection="column"
+          justifyContent="flex-start"
+          alignItems="stretch"
+          style={{ marginTop: top }}
+        >
+          <Slot />
+        </Box>
+      </GluestackUIProvider>
+    </ExpoSupabaseProvider>
+  );
+};
 export default RootLayout;

audire/audire-mobile-app/src/machines/MCQ/events/machine.ts

@@ -1,4 +1,4 @@
-import { McqQuestion } from '../../../../../../libs/syllabus/src/types';
+import { McqQuestion } from '@learning-app/syllabus';
 
 export type StartExamEvent = {
   type: 'START_EXAM';

audire/audire-mobile-app/src/modules/common/Topbar.tsx

@@ -21,13 +21,12 @@ const Topbar: FC<TopbarProps> = ({ onToggleSidebar }) => {
     <Box
       w="$full"
       paddingHorizontal="$5"
-      pt={top > 10 ? "$0" : undefined}
+      pt={top > 10 ? '$0' : undefined}
       pb="$3"
       display="flex"
       flexDirection="row"
       justifyContent="space-between"
       alignItems="center"
-      style={{ marginTop: top }}
     >
       <Box display="flex" flexDirection="row" alignItems="center">
         <Pressable onPress={onToggleSidebar}>