acazares
73a535291a
- Added sidebar menu components including sidebar-menu-item, sidebar-menu-skeleton, sidebar-menu-sub-button, sidebar-menu-sub-item, sidebar-menu-sub, sidebar-menu, sidebar-provider, sidebar-rail, sidebar-separator, sidebar-trigger, and sidebar. - Introduced skeleton loading states for sidebar items. - Integrated tooltip components for enhanced user interaction. - Developed mobile responsiveness using media queries. - Established authentication flow with Keycloak, including login, logout, and token management. - Implemented server-side redirection based on authentication status. - Enhanced error handling and logging for authentication processes.
46 lines
1.4 KiB
Svelte
46 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import { sidebarData } from "$lib/components/sidebar/modules";
|
|
import NavMain from "./nav-main.svelte";
|
|
import NavProjects from "./nav-projects.svelte";
|
|
import NavUser from "./nav-user.svelte";
|
|
import TeamSwitcher from "./team-switcher.svelte";
|
|
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
|
import type { ComponentProps } from "svelte";
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
collapsible = "icon",
|
|
...restProps
|
|
}: ComponentProps<typeof Sidebar.Root> = $props();
|
|
|
|
// Obtener datos del usuario desde el contexto (viene de Keycloak vía +layout.server.ts)
|
|
const userData = getContext<any>('user');
|
|
|
|
// Combinar los datos estáticos del sidebar con los datos del usuario de Keycloak
|
|
const data = $derived({
|
|
...sidebarData,
|
|
user: userData
|
|
? {
|
|
name: userData.name || userData.preferred_username || "",
|
|
email: userData.email || "",
|
|
avatar: "/avatars/default.jpg", // Puedes agregar avatar desde Keycloak si está disponible
|
|
}
|
|
: sidebarData.user,
|
|
});
|
|
</script>
|
|
|
|
<Sidebar.Root {collapsible} {...restProps}>
|
|
<Sidebar.Header>
|
|
<TeamSwitcher teams={data.teams} />
|
|
</Sidebar.Header>
|
|
<Sidebar.Content>
|
|
<NavMain items={data.navMain} />
|
|
<NavProjects projects={data.projects} />
|
|
</Sidebar.Content>
|
|
<Sidebar.Footer>
|
|
<NavUser user={data.user} />
|
|
</Sidebar.Footer>
|
|
<Sidebar.Rail />
|
|
</Sidebar.Root>
|