c2cdd2c97d
Package: @lilith/admin-shell Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
106 lines
4.3 KiB
JavaScript
106 lines
4.3 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { NavLink } from '@lilith/ui-router';
|
|
import { styled } from '@lilith/ui-styled-components';
|
|
const SidebarContainer = styled.nav `
|
|
width: 16rem;
|
|
background: ${({ theme }) => theme.colors.surface};
|
|
border-right: 1px solid ${({ theme }) => theme.colors.border.default};
|
|
padding: ${({ theme }) => theme.spacing.md};
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
`;
|
|
const LogoArea = styled.div `
|
|
margin-bottom: ${({ theme }) => theme.spacing.xl};
|
|
`;
|
|
const LogoTitle = styled.h1 `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.xl};
|
|
font-weight: ${({ theme }) => theme.typography.fontWeight.bold};
|
|
color: ${({ theme, $accentColor }) => $accentColor === 'accent' ? theme.colors.accent.main : theme.colors.primary.main};
|
|
`;
|
|
const LogoSubtitle = styled.p `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.sm};
|
|
color: ${({ theme }) => theme.colors.text.muted};
|
|
`;
|
|
const Badge = styled.span `
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
margin-left: 8px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
background: ${({ theme, $variant }) => {
|
|
switch ($variant) {
|
|
case 'warning': return `${theme.colors.warning.main}30`;
|
|
case 'info': return `${theme.colors.info.main}30`;
|
|
case 'success': return `${theme.colors.success.main}30`;
|
|
case 'error': return `${theme.colors.error.main}30`;
|
|
default: return `${theme.colors.warning.main}30`;
|
|
}
|
|
}};
|
|
color: ${({ theme, $variant }) => {
|
|
switch ($variant) {
|
|
case 'warning': return theme.colors.warning.main;
|
|
case 'info': return theme.colors.info.main;
|
|
case 'success': return theme.colors.success.main;
|
|
case 'error': return theme.colors.error.main;
|
|
default: return theme.colors.warning.main;
|
|
}
|
|
}};
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
`;
|
|
const NavSectionsContainer = styled.div `
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing.lg};
|
|
`;
|
|
const NavSectionContainer = styled.div ``;
|
|
const NavSectionTitle = styled.h2 `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.xs};
|
|
font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
|
|
color: ${({ theme }) => theme.colors.text.muted};
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: ${({ theme }) => theme.spacing.sm};
|
|
`;
|
|
const NavList = styled.ul `
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing.xs};
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
`;
|
|
const StyledNavLink = styled(NavLink) `
|
|
display: block;
|
|
padding: ${({ theme }) => `${theme.spacing.sm} ${theme.spacing.md}`};
|
|
border-radius: ${({ theme }) => theme.borderRadius.md};
|
|
font-size: ${({ theme }) => theme.typography.fontSize.sm};
|
|
transition: ${({ theme }) => theme.transitions.fast};
|
|
text-decoration: none;
|
|
|
|
&.active {
|
|
background: ${({ theme, $accentColor }) => $accentColor === 'accent'
|
|
? `${theme.colors.accent.main}20`
|
|
: `${theme.colors.primary.main}20`};
|
|
color: ${({ theme, $accentColor }) => $accentColor === 'accent' ? theme.colors.accent.main : theme.colors.primary.main};
|
|
}
|
|
|
|
&:not(.active) {
|
|
color: ${({ theme }) => theme.colors.text.muted};
|
|
|
|
&:hover {
|
|
background: ${({ theme }) => theme.colors.hover.surface};
|
|
color: ${({ theme }) => theme.colors.text.primary};
|
|
}
|
|
}
|
|
`;
|
|
const Footer = styled.div `
|
|
font-size: ${({ theme }) => theme.typography.fontSize.xs};
|
|
color: ${({ theme }) => theme.colors.text.muted};
|
|
`;
|
|
export function Sidebar({ logo, navigation, footerText, accentColor = 'primary' }) {
|
|
return (_jsxs(SidebarContainer, { children: [_jsxs(LogoArea, { children: [_jsxs(LogoTitle, { "$accentColor": accentColor, children: [logo.title, logo.badge && _jsx(Badge, { "$variant": logo.badgeVariant, children: logo.badge })] }), _jsx(LogoSubtitle, { children: logo.subtitle })] }), _jsx(NavSectionsContainer, { children: navigation.map((section) => (_jsxs(NavSectionContainer, { children: [_jsx(NavSectionTitle, { children: section.title }), _jsx(NavList, { children: section.items.map((item) => (_jsx("li", { children: _jsx(StyledNavLink, { to: item.to, end: true, title: item.description, "$accentColor": accentColor, children: item.label }) }, item.to))) })] }, section.title))) }), footerText && _jsx(Footer, { children: footerText })] }));
|
|
}
|