skill_web/components/
layout.rs

1//! Main layout component with sidebar and navbar
2
3use yew::prelude::*;
4use yew_router::prelude::*;
5
6use crate::router::Route;
7use super::navbar::Navbar;
8use super::sidebar::Sidebar;
9use super::notifications::NotificationContainer;
10
11/// Props for the Layout component
12#[derive(Properties, PartialEq)]
13pub struct LayoutProps {
14    pub children: Children,
15}
16
17/// Main layout component that wraps all pages
18#[function_component(Layout)]
19pub fn layout(props: &LayoutProps) -> Html {
20    let route = use_route::<Route>();
21    let show_sidebar = route.map(|r| r.show_sidebar()).unwrap_or(true);
22
23    html! {
24        <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
25            // Global notification container
26            <NotificationContainer />
27
28            if show_sidebar {
29                <Navbar />
30                <div class="flex">
31                    <Sidebar />
32                    <main class="flex-1 ml-64 mt-16 p-6">
33                        <div class="max-w-7xl mx-auto">
34                            { for props.children.iter() }
35                        </div>
36                    </main>
37                </div>
38            } else {
39                // Full-screen layout for onboarding
40                <main class="min-h-screen">
41                    { for props.children.iter() }
42                </main>
43            }
44        </div>
45    }
46}