feat: Dashboard layout design & sidebar (#41)

Author: Mbabazi12

__tests__/components/sidebar.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { useRouter, usePathname } from 'expo-router';
+import Sidebar from '@/components/sidebar'; // Adjust the import path as needed
+
+// Mock the expo-router hooks
+jest.mock('expo-router', () => ({
+  useRouter: jest.fn(),
+  usePathname: jest.fn(),
+}));
+
+// Mock the SvgXml component
+jest.mock('react-native-svg', () => ({
+  SvgXml: 'SvgXml',
+}));
+
+describe('Sidebar', () => {
+  const mockOnClose = jest.fn();
+  const mockPush = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useRouter as jest.Mock).mockReturnValue({ push: mockPush });
+    (usePathname as jest.Mock).mockReturnValue('/dashboard');
+  });
+
+  it('renders correctly', () => {
+    const { getByText } = render(<Sidebar onClose={mockOnClose} />);
+    expect(getByText('Dashboard')).toBeTruthy();
+    expect(getByText('Attendance')).toBeTruthy();
+    expect(getByText('Performance')).toBeTruthy();
+    expect(getByText('Calendar')).toBeTruthy();
+    expect(getByText('Docs')).toBeTruthy();
+    expect(getByText('Help')).toBeTruthy();
+    expect(getByText('LogOut')).toBeTruthy();
+  });
+
+  it('highlights the active item based on current pathname', () => {
+    (usePathname as jest.Mock).mockReturnValue('/dashboard/trainee');
+    const { getByText } = render(<Sidebar onClose={mockOnClose} />);
+    const attendanceItem = getByText('Attendance').parent;
+    expect(attendanceItem?.props.style).toEqual(
+      expect.objectContaining({
+        backgroundColor: expect.stringContaining('indigo')
+      })
+    );
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const { getByTestId } = render(<Sidebar onClose={mockOnClose} />);
+    const closeButton = getByTestId('close-button');
+    fireEvent.press(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('navigates and closes sidebar when an item is pressed', async () => {
+    const { getByText } = render(<Sidebar onClose={mockOnClose} />);
+    fireEvent.press(getByText('Attendance'));
+    
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith('/dashboard/trainee');
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+});

app/_layout.tsx

@@ -60,6 +60,7 @@ function RootLayoutNav() {
         <Stack>
           <Stack.Screen name="(onboarding)" options={{ headerShown: false }} />
           <Stack.Screen name="auth" options={{ headerShown: false }} />
+          <Stack.Screen name="dashboard" options={{ headerShown: false }}/>
         </Stack>
       </ThemeProvider>
     </ApolloProvider>

app/dashboard/_layout.tsx

@@ -0,0 +1,77 @@
+import { lightLogoIcon, darkLogoIcon, menu, lightNotifyIcon, darkNotifyIcon } from '@/assets/Icons/dashboard/Icons';
+import { Slot } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { KeyboardAvoidingView, Platform, ScrollView, TouchableOpacity, View, useColorScheme, Image } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SvgXml } from 'react-native-svg';
+import Sidebar from '@/components/sidebar';
+
+export default function AuthLayout() {
+  const insets = useSafeAreaInsets();
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+  const colorScheme = useColorScheme();
+
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+      className="bg-primary-light dark:bg-primary-dark"
+    >
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+        bounces={false}
+        style={{
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        }}
+      >
+        <View className={`bg-primary-light dark:bg-primary-dark h-full px-5`}>
+          <View className="w-full h-[60px] relative bg-primary-light dark:bg-primary-dark flex justify-center ">
+            <View className="flex-row justify-between">
+              <View className="flex-row">
+                <TouchableOpacity onPress={toggleSidebar}>
+                  <SvgXml xml={menu} width={40} height={40} />
+                </TouchableOpacity>
+                <SvgXml 
+                    xml={colorScheme === 'dark' ? darkLogoIcon : lightLogoIcon} 
+                    width={100} 
+                    height={40}
+                  />
+              </View>
+              <View className="flex-row gap-5">
+                <TouchableOpacity>
+                <SvgXml 
+                    xml={colorScheme === 'dark' ? darkNotifyIcon : lightNotifyIcon} 
+                    width={25} 
+                    height={40}
+                  />
+                </TouchableOpacity>
+                <TouchableOpacity>
+                  <Image
+                    source={require('@/assets/images/profilePic.png')}
+                    style={{ width: 40, height: 40 }}
+                  />
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+          <Slot />
+        </View>
+      </ScrollView>
+      {isSidebarOpen && (
+        <View className="absolute top-0 left-0 bottom-0">
+          <Sidebar
+            onClose={toggleSidebar}
+          />
+        </View>
+      )}
+    </KeyboardAvoidingView>
+  );
+}

app/dashboard/index.tsx

@@ -1,9 +1,16 @@
-import { Text, View } from 'react-native';
-
-export default function Dashboard() {
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { PropsWithChildren } from 'react';
+import React from 'react';
+export const CustomText = ({ children }: PropsWithChildren) => <Text>{children}</Text>;
+const Dashboard = () => {
+  const colorScheme = useColorScheme();
   return (
     <View>
-      <Text>Dashboard.</Text>
+      <Text className={`ml-2 text-base ${colorScheme === 'light' ? 'text-black' : 'text-white'}`}>Dashboard Coming soon</Text>
     </View>
   );
-}
+};
+
+export default Dashboard;
+
+const styles = StyleSheet.create({});

app/dashboard/trainee/index.tsx

@@ -3,7 +3,7 @@ import { Text, View } from 'react-native';
 export default function TraineeDashboard() {
   return (
     <View>
-      <Text>Trainee Dashboard.</Text>
+      <Text>Trainee Dashboard Coming Soon</Text>
     </View>
   );
 }