@himakarinv/nativex 1.0.0

package/src/components/Sidenavbar/Sidenavbar.tsx

@@ -0,0 +1,358 @@
+import { useEffect, useState } from 'react';
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition, dismissButtonFocus } from '../Button';
+import { Icon, IconName } from '../Icon';
+
+export type SidenavSubItem = {
+  id: string;
+  label: string;
+  icon: string;
+};
+
+export type SidenavItem = {
+  id: string;
+  label: string;
+  icon: string;
+  danger?: boolean;
+  children?: SidenavSubItem[];
+};
+
+export type SidenavSection = {
+  title: string;
+  items: SidenavItem[];
+  scrollable?: boolean;
+};
+
+export type SidenavbarProps = {
+  logoSrc?: string;
+  logoAlt?: string;
+  activeItemId?: string;
+  bodySections?: SidenavSection[];
+  footerSection?: SidenavSection;
+  onActiveItemChange?: (id: string) => void;
+  onToggleCollapse?: (collapsed: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+function parentOf(sections: SidenavSection[], selectedId: string) {
+  for (const section of sections) {
+    for (const item of section.items) {
+      if (item.children?.some((child) => child.id === selectedId)) {
+        return item.id;
+      }
+    }
+  }
+  return null;
+}
+
+export function Sidenavbar({
+  logoSrc = '',
+  logoAlt = '',
+  activeItemId = 'dashboard',
+  bodySections = [],
+  footerSection = { title: '', items: [] },
+  onActiveItemChange,
+  onToggleCollapse,
+  style,
+}: SidenavbarProps) {
+  const { width } = useWindowDimensions();
+  const [selectedId, setSelectedId] = useState(activeItemId);
+  const [expandedItemId, setExpandedItemId] = useState<string | null>(() => parentOf(bodySections, activeItemId));
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    setSelectedId(activeItemId);
+    setExpandedItemId(parentOf(bodySections, activeItemId));
+  }, [activeItemId]);
+
+  const expandedWidth = Math.min(spacing['6xl'] * 6, Math.round(width * 0.82));
+  const railWidth = collapsed ? spacing['4xl'] + spacing['6xl'] : expandedWidth;
+
+  function select(id: string) {
+    setSelectedId(id);
+    setExpandedItemId(parentOf(bodySections, id));
+    onActiveItemChange?.(id);
+  }
+
+  function toggleParent(id: string) {
+    setExpandedItemId((current) => (current === id ? null : id));
+  }
+
+  function toggleCollapse() {
+    const next = !collapsed;
+    setCollapsed(next);
+    if (next) {
+      setExpandedItemId(null);
+    }
+    dismissButtonFocus();
+    onToggleCollapse?.(next);
+  }
+
+  function renderItem(item: SidenavItem, nested = false) {
+    const hasChildren = Boolean(item.children?.length);
+    const isSelected = selectedId === item.id;
+    const isParentActive = hasChildren && item.children?.some((child) => child.id === selectedId);
+    const isActive = isSelected || Boolean(isParentActive);
+    const isExpanded = expandedItemId === item.id;
+    const iconColor = item.danger
+      ? colors.danger.dark
+      : isActive
+        ? colors.sidenavbar.activeText
+        : colors.sidenavbar.text;
+
+    return (
+      <View key={item.id}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityState={{ selected: isActive, expanded: hasChildren ? isExpanded : undefined }}
+          accessibilityLabel={item.label}
+          android_ripple={{ color: colors.sidenavbar.hoverBackground, borderless: false }}
+          onPress={() => (hasChildren ? toggleParent(item.id) : select(item.id))}
+          style={[styles.itemHit, nested && styles.itemNested]}>
+          <View
+            style={[
+              styles.itemInner,
+              collapsed && styles.itemInnerCollapsed,
+              isActive && !item.danger && styles.itemInnerActive,
+              isActive && item.danger && styles.itemInnerDangerActive,
+            ]}>
+            <Icon name={item.icon} size={spacing.lg} color={iconColor} decorative />
+            {collapsed ? null : (
+              <Text
+                numberOfLines={1}
+                style={[
+                  styles.itemLabel,
+                  isActive && styles.itemLabelActive,
+                  item.danger && styles.itemLabelDanger,
+                ]}>
+                {item.label}
+              </Text>
+            )}
+            {hasChildren && !collapsed ? (
+              <Icon
+                name={isExpanded ? IconName.ChevronDown : IconName.ChevronRight}
+                size={spacing.base}
+                color={isActive ? colors.sidenavbar.activeText : colors.sidenavbar.text}
+                decorative
+              />
+            ) : null}
+          </View>
+        </Pressable>
+
+        {hasChildren && isExpanded && !collapsed ? (
+          <View style={styles.submenu}>
+            {item.children?.map((child) =>
+              renderItem({ id: child.id, label: child.label, icon: child.icon }, true),
+            )}
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+
+  function renderSection(section: SidenavSection, footer = false) {
+    const list = (
+      <View style={styles.navList}>
+        {section.items.map((item) => renderItem(item))}
+      </View>
+    );
+
+    return (
+      <View key={section.title} style={styles.section}>
+        {collapsed || !section.title ? null : (
+          <Text style={styles.sectionTitle}>{section.title}</Text>
+        )}
+        {section.scrollable && !footer ? (
+          <ScrollView
+            style={styles.scrollableList}
+            nestedScrollEnabled
+            showsVerticalScrollIndicator={false}
+            onScrollBeginDrag={() => setExpandedItemId(null)}>
+            {list}
+          </ScrollView>
+        ) : (
+          list
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      accessibilityLabel="Main navigation"
+      style={[styles.host, { width: railWidth }, collapsed && styles.hostCollapsed, style]}>
+      <View style={[styles.header, collapsed && styles.headerCollapsed]}>
+        <View style={styles.brand}>
+          {logoSrc ? (
+            <Image accessibilityLabel={logoAlt} resizeMode="contain" source={{ uri: logoSrc }} style={styles.logo} />
+          ) : logoAlt ? (
+            <Text numberOfLines={1} style={styles.brandText}>
+              {logoAlt}
+            </Text>
+          ) : null}
+        </View>
+        <Button
+          variant={ButtonVariant.SecondaryGray}
+          size={ButtonSize.Small}
+          iconPosition={IconPosition.Only}
+          iconName={collapsed ? IconName.ChevronRight : IconName.ChevronLeft}
+          iconDecorative
+          accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          onPress={toggleCollapse}
+          contentStyle={styles.collapseBtn}
+        />
+      </View>
+
+      <View style={styles.middle}>
+        <View style={styles.body}>{bodySections.map((section) => renderSection(section))}</View>
+        <View style={styles.tail} />
+        <View style={styles.footer}>{renderSection(footerSection, true)}</View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    height: '100%',
+    maxWidth: '100%',
+    backgroundColor: colors.sidenavbar.background,
+    borderRightWidth: borders.width.thin,
+    borderRightColor: colors.sidenavbar.border,
+  },
+  hostCollapsed: {
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+    paddingLeft: spacing.base,
+    paddingRight: spacing.sm,
+  },
+  headerCollapsed: {
+    flexDirection: 'column',
+    paddingHorizontal: spacing.xs,
+  },
+  brand: {
+    flex: 1,
+    minWidth: 0,
+  },
+  logo: {
+    width: '100%',
+    maxWidth: spacing['6xl'] * 4,
+    height: spacing['6xl'],
+  },
+  brandText: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.md,
+    fontWeight: typography.fontWeight.bold,
+    color: colors.text.strong,
+  },
+  collapseBtn: {
+    width: spacing['3xl'],
+    height: spacing['3xl'],
+    minHeight: spacing['3xl'],
+    padding: spacing.none,
+    backgroundColor: colors.white,
+    borderWidth: borders.width.thin,
+    borderColor: colors.sidenavbar.border,
+    borderRadius: radius.lg,
+  },
+  middle: {
+    flex: 1,
+    minHeight: 0,
+  },
+  body: {
+    gap: spacing.sm,
+  },
+  tail: {
+    flex: 1,
+    minHeight: spacing.base,
+  },
+  footer: {
+    paddingBottom: spacing.md,
+  },
+  section: {
+    minHeight: 0,
+  },
+  sectionTitle: {
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.md,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    textTransform: 'uppercase',
+    color: colors.text.muted,
+  },
+  navList: {
+    paddingHorizontal: spacing.sm,
+    gap: spacing.xs,
+  },
+  scrollableList: {
+    maxHeight: spacing['5xl'] * 6 + spacing.xs * 5,
+  },
+  itemHit: {
+    width: '100%',
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  submenu: {
+    paddingTop: spacing.sm,
+    gap: spacing.xs,
+  },
+  itemNested: {
+    paddingLeft: spacing.lg,
+  },
+  itemInner: {
+    minHeight: spacing['5xl'],
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  itemInnerCollapsed: {
+    justifyContent: 'center',
+    paddingHorizontal: spacing.sm,
+    gap: spacing.none,
+  },
+  itemInnerActive: {
+    backgroundColor: colors.sidenavbar.activeBackground,
+    borderRadius: radius.md,
+  },
+  itemInnerDangerActive: {
+    backgroundColor: colors.danger.lighter,
+    borderRadius: radius.md,
+  },
+  itemLabel: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    color: colors.sidenavbar.text,
+  },
+  itemLabelActive: {
+    fontWeight: typography.fontWeight.bold,
+    color: colors.sidenavbar.activeText,
+  },
+  itemLabelDanger: {
+    color: colors.danger.dark,
+  },
+});

package/src/components/Sidenavbar/index.ts

@@ -0,0 +1,2 @@
+export { Sidenavbar } from './Sidenavbar';
+export type { SidenavbarProps, SidenavSection, SidenavItem, SidenavSubItem } from './Sidenavbar';