| 108 | } |
| 109 | |
| 110 | function ActivePageMarker({ |
| 111 | group, |
| 112 | pathname, |
| 113 | }: { |
| 114 | group: NavGroup |
| 115 | pathname: string |
| 116 | }) { |
| 117 | let itemHeight = remToPx(2) |
| 118 | let offset = remToPx(0.25) |
| 119 | let activePageIndex = group.links.findIndex((link) => |
| 120 | matchPath(pathname, link.href), |
| 121 | ) |
| 122 | let top = offset + activePageIndex * itemHeight |
| 123 | |
| 124 | return ( |
| 125 | <motion.div |
| 126 | layout |
| 127 | className="absolute left-2 h-6 w-px bg-red-500" |
| 128 | initial={{ opacity: 0 }} |
| 129 | animate={{ opacity: 1 }} |
| 130 | transition={{ duration: 0.15 }} |
| 131 | exit={{ opacity: 0 }} |
| 132 | style={{ top }} |
| 133 | /> |
| 134 | ) |
| 135 | } |
| 136 | |
| 137 | function NavigationGroup({ |
| 138 | group, |