polen 0.8.0-next.4 → 0.8.0-next.5

package/src/template/components/Sidebar.tsx

@@ -0,0 +1,92 @@
+import { Box, Flex, Text } from '@radix-ui/themes'
+import { Link, useLocation } from 'react-router'
+
+export interface SidebarItem {
+  title: string
+  pathExp: string
+  children?: SidebarItem[]
+}
+
+interface SidebarProps {
+  items: SidebarItem[]
+}
+
+export const Sidebar = ({ items }: SidebarProps) => {
+  const location = useLocation()
+
+  return (
+    <Box
+      style={{
+        width: `240px`,
+        borderRight: `1px solid var(--gray-3)`,
+        height: `100%`,
+        paddingRight: `var(--space-4)`,
+      }}
+    >
+      <Flex direction='column' gap='1'>
+        {items.map((item) => (
+          <SidebarItem
+            key={item.pathExp}
+            item={item}
+            currentPathExp={location.pathname}
+          />
+        ))}
+      </Flex>
+    </Box>
+  )
+}
+
+interface SidebarItemProps {
+  item: SidebarItem
+  currentPathExp: string
+  level?: number
+}
+
+const SidebarItem = ({ item, currentPathExp: currentPath, level = 0 }: SidebarItemProps) => {
+  const isActive = currentPath === item.pathExp
+  const hasChildren = item.children && item.children.length > 0
+
+  return (
+    <>
+      <Link
+        to={item.pathExp}
+        style={{
+          textDecoration: `none`,
+          color: isActive ? `var(--accent-11)` : `var(--gray-12)`,
+          padding: `var(--space-2) var(--space-3)`,
+          paddingLeft: `calc(var(--space-3) + ${(level * 16).toString()}px)`,
+          borderRadius: `var(--radius-2)`,
+          display: `block`,
+          backgroundColor: isActive ? `var(--accent-3)` : `transparent`,
+          transition: `background-color 0.2s ease, color 0.2s ease`,
+        }}
+        onMouseEnter={(e) => {
+          if (!isActive) {
+            e.currentTarget.style.backgroundColor = `var(--gray-2)`
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!isActive) {
+            e.currentTarget.style.backgroundColor = `transparent`
+          }
+        }}
+      >
+        <Text size='2' weight={isActive ? `medium` : `regular`}>
+          {item.title}
+        </Text>
+      </Link>
+      {hasChildren && (
+        <Flex direction='column' gap='1'>
+          {item.children!.map((child) => (
+            <SidebarItem
+              key={child.pathExp}
+              item={child}
+              currentPathExp={currentPath}
+              level={level + 1}
+            />
+          ))}
+        </Flex>
+      )}
+    </>
+  )
+}

package/src/template/routes/root.tsx

@@ -5,10 +5,11 @@ import { Box, Button, Heading, Text } from '@radix-ui/themes'
 import { Flex, Theme } from '@radix-ui/themes'
 import radixStylesUrl from '@radix-ui/themes/styles.css?url'
 import { Link as LinkReactRouter } from 'react-router'
-import { Outlet, ScrollRestoration } from 'react-router'
+import { Outlet, ScrollRestoration, useLocation } from 'react-router'
 import { PROJECT_DATA } from 'virtual:polen/project/data'
 import { templateVariables } from 'virtual:polen/template/variables'
 import { Link } from '../components/Link.jsx'
+import { Sidebar } from '../components/Sidebar.jsx'
 import entryClientUrl from '../entry.client.jsx?url'
 import { changelog } from './changelog.jsx'
 import { index } from './index.jsx'
@@ -55,6 +56,23 @@ export const Component = () => {
 }
 
 const Layout = () => {
+  const location = useLocation()
+
+  // Determine if we should show sidebar based on current path
+  const getCurrentNavPathExp = (): string | null => {
+    // todo: general path manipulation lib because we are duplicating logic here found in FileRouter
+    // todo: kit: try a Str.split that returns [] | string[] so that our predicates can refine on it?
+    const segments = location.pathname.split(`/`).filter(Boolean)
+    if (Arr.isntEmpty(segments)) {
+      return `/${segments[0]}`
+    }
+    return null
+  }
+
+  const currentNavPathExp = getCurrentNavPathExp()
+  const sidebarItems = currentNavPathExp && PROJECT_DATA.sidebar[currentNavPathExp]
+  const showSidebar = sidebarItems && sidebarItems.length > 0
+
   return (
     <Theme asChild>
       <Box m='8'>
@@ -80,15 +98,26 @@ const Layout = () => {
           </LinkReactRouter>
           <Flex direction='row' gap='4'>
             {PROJECT_DATA.siteNavigationItems.map((item, key) => (
-              <Link key={key} color='gray' to={item.path}>
+              <Link key={key} color='gray' to={item.pathExp}>
                 {item.title}
               </Link>
             ))}
           </Flex>
         </Flex>
-        <Box>
-          <Outlet />
-        </Box>
+        {showSidebar
+          ? (
+            <Flex gap='8'>
+              <Sidebar items={sidebarItems} />
+              <Box style={{ flex: 1 }}>
+                <Outlet />
+              </Box>
+            </Flex>
+          )
+          : (
+            <Box>
+              <Outlet />
+            </Box>
+          )}
       </Box>
     </Theme>
   )
@@ -165,6 +194,7 @@ children.push(notFoundRoute)
 //
 //
 
+import { Arr } from '@wollybeard/kit'
 import { pages } from 'virtual:polen/project/pages.jsx'
 
 export const root = createRoute({