import React from "react";
import { Stack } from "expo-router/stack";
import { SafeAreaView } from "react-native-safe-area-context";

import Header from "@/components/dashboard/header";

export default function DashboardLayout() {
return (
<SafeAreaView className= "flex-1" >
<Stack
screenOptions={{
header: () => <Header />,
}}
>
<Stack.Screen
name= "index"
options={{
title: "Dashboard",
}}
/>
<Stack.Screen
name= "screen1"
options={{
title: "Screen 1",
}}
/>
<Stack.Screen
name= "long-content"
options={{
title: "Long Content",
}}
/>
</Stack>
</SafeAreaView>
);
}

import { ScrollView, View } from "react-native";
import { Slot } from "expo-router";

import Header from "@/components/dashboard/header";
import Sidebar from "@/components/dashboard/sidebar";

export default function DashboardLayoutWeb() {
return (
<View className= "flex-1 box-border flex flex-row" >
<Sidebar />
<View className= "flex-1 flex-col box-border" >
<Header />

{/*
* <Slot /> will replace all the content from specific routes.
* <ScrollView /> React Native does not support auto scroll bar, for that we use ScrollView
* So, if any pages/routes get more content than we'll get the scroll view automatically
*/}
<ScrollView
className= "flex-1 px-3 py-7 sm:px-12 sm:py-9"
contentContainerStyle={{ flexGrow: 1 }}
>
<Slot />
</ScrollView>
</View>
</View>
);
}