navigation rail

Author: lerte

apps/docs/src/usages/navigation/navigation-rail.tsx

@@ -1,35 +1,25 @@
-import { Icon, List, ListItem, NavigationRail } from 'actify'
+import { NavigationRail } from 'actify'
 
 export default () => {
-  const list = [
+  const items = [
     {
       label: 'Home',
-      icon: <Icon>home</Icon>
+      icon: 'home',
+      badge: 1234
     },
     {
       label: 'Camera',
-      icon: <Icon>photo_camera</Icon>
+      icon: 'photo_camera'
     },
     {
       label: 'User',
-      icon: <Icon>person</Icon>
+      icon: 'person'
     },
     {
       label: 'Settings',
-      icon: <Icon>settings</Icon>
+      icon: 'settings'
     }
   ]
 
-  return (
-    <NavigationRail>
-      <List className="py-3 w-full">
-        {list.map((item, index) => (
-          <ListItem key={index} className="pl-0 py-2 flex flex-col">
-            {item.icon}
-            <span className="text-xs font-semibold mt-1">{item.label}</span>
-          </ListItem>
-        ))}
-      </List>
-    </NavigationRail>
-  )
+  return <NavigationRail items={items} />
 }

packages/actify/src/components/NavigationRail/NavigationRail.tsx

@@ -1,16 +1,75 @@
 'use client'
 
+import { Badge } from '../Badges'
+import { Icon } from '../Icon'
 import React from 'react'
+import { Ripple } from '../Ripple'
 import clsx from 'clsx'
 import styles from './navigation-rail.module.css'
+import { useControllableState } from '../../hooks'
 
-interface NavigationRailProps extends React.ComponentProps<'div'> {}
+interface Item extends React.ComponentProps<'button'> {
+  label: string
+  icon: React.ReactNode
+  badge?: number | string
+  isActive?: boolean
+}
+
+interface NavigationRailProps extends React.ComponentProps<'div'> {
+  items: Item[]
+  menu?: React.ReactNode
+  value?: number
+  defaultValue?: number
+  setValue?: (index: number) => void
+}
+
+const Item = (props: Item) => {
+  const { icon, label, badge, isActive, ...rest } = props
+
+  return (
+    <button
+      {...rest}
+      className={clsx(styles['item'], isActive && styles['active'])}
+    >
+      <Ripple />
+      <Badge value={badge}>
+        {typeof icon == 'string' ? <Icon>{icon}</Icon> : icon}
+      </Badge>
+      <label className={styles['label']}>{label}</label>
+    </button>
+  )
+}
 
 const NavigationRail = (props: NavigationRailProps) => {
-  const { children, className, ...rest } = props
+  const { value, defaultValue, setValue } = props
+  const [activeIndex, setActiveIndex] = useControllableState({
+    value,
+    defaultValue,
+    onChange: setValue
+  })
+
+  const { children, className, menu, items = [], ...rest } = props
   return (
     <div {...rest} className={clsx(styles['root'], className)}>
-      {children}
+      {/* Menu icon (optional) */}
+      {menu}
+      {/* Navigation Items */}
+      <nav className={styles['items']}>
+        {items.map((item, index) => {
+          const { icon, label, badge } = item
+          const isActive = index == activeIndex
+          return (
+            <Item
+              key={index}
+              icon={icon}
+              label={label}
+              badge={badge}
+              isActive={isActive}
+              onClick={() => setActiveIndex(index)}
+            />
+          )
+        })}
+      </nav>
     </div>
   )
 }

packages/actify/src/components/NavigationRail/navigation-rail.module.css

@@ -1,8 +1,29 @@
 .root {
+  display: inline-flex;
+}
+.items {
+  width: 80px;
+  min-height: 540px;
   display: flex;
-  align-items: center;
+  gap: 12px;
   justify-content: center;
-  width: 5rem /* 80px */;
-  min-height: 33.75rem /* 540px */;
+  flex-direction: column;
   background-color: var(--md-sys-color-surface);
 }
+.item {
+  height: 56px;
+  width: 100%;
+  display: flex;
+  position: relative;
+  align-items: center;
+  flex-direction: column;
+}
+.active {
+  color: var(--md-sys-color-on-primary);
+  background-color: var(--md-sys-color-primary);
+}
+.label {
+  font-size: 12px;
+  font-weight: 600;
+  margin-top: 4px;
+}