Add end_links to Navbar (#181)

Author: samuelcolvin

bump_npm.py

@@ -1,3 +1,4 @@
+#!/usr/bin/env python
 from __future__ import annotations
 
 import json

demo/shared.py

@@ -11,7 +11,7 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
         c.Navbar(
             title='FastUI Demo',
             title_event=GoToEvent(url='/'),
-            links=[
+            start_links=[
                 c.Link(
                     components=[c.Text(text='Components')],
                     on_click=GoToEvent(url='/components'),

demo/tests.py

@@ -32,7 +32,8 @@ def test_api_root(client: TestClient):
         {
             'title': 'FastUI Demo',
             'titleEvent': {'url': '/', 'type': 'go-to'},
-            'links': IsList(length=4),
+            'startLinks': IsList(length=4),
+            'endLinks': [],
             'type': 'Navbar',
         },
         {
@@ -60,7 +61,7 @@ def get_menu_links():
         r = client.get('/api/')
         assert r.status_code == 200
         data = r.json()
-        for link in data[1]['links']:
+        for link in data[1]['startLinks']:
             url = link['onClick']['url']
             yield pytest.param(f'/api{url}', id=url)
 

src/npm-fastui-bootstrap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.19"
+    "@pydantic/fastui": "0.0.20"
   }
 }

src/npm-fastui-bootstrap/src/navbar.tsx

@@ -3,7 +3,11 @@ import { components, useClassName, models } from 'fastui'
 import BootstrapNavbar from 'react-bootstrap/Navbar'
 
 export const Navbar: FC<models.Navbar> = (props) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
@@ -14,7 +18,14 @@ export const Navbar: FC<models.Navbar> = (props) => {
         <BootstrapNavbar.Toggle aria-controls="navbar-collapse" />
         <BootstrapNavbar.Collapse id="navbar-collapse">
           <ul className="navbar-nav me-auto">
-            {links.map((link, i) => (
+            {startLinks.map((link, i) => (
+              <li key={i} className="nav-item">
+                <components.LinkComp {...link} />
+              </li>
+            ))}
+          </ul>
+          <ul className="navbar-nav ms-auto">
+            {endLinks.map((link, i) => (
               <li key={i} className="nav-item">
                 <components.LinkComp {...link} />
               </li>

src/npm-fastui-prebuilt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",

src/npm-fastui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/npm-fastui/src/components/navbar.tsx

@@ -5,15 +5,22 @@ import { useClassName } from '../hooks/className'
 import { LinkComp, LinkRender } from './link'
 
 export const NavbarComp = (props: Navbar) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
   return (
     <nav className={useClassName(props)}>
       <div className={useClassName(props, { el: 'contents' })}>
         <NavbarTitle {...props} />
-        {links.map((link, i) => (
+        {startLinks.map((link, i) => (
+          <LinkComp key={i} {...link} />
+        ))}
+        {endLinks.map((link, i) => (
           <LinkComp key={i} {...link} />
         ))}
       </div>

src/npm-fastui/src/models.d.ts

@@ -174,7 +174,8 @@ export interface LinkList {
 export interface Navbar {
   title?: string
   titleEvent?: PageEvent | GoToEvent | BackEvent | AuthEvent
-  links: Link[]
+  startLinks: Link[]
+  endLinks: Link[]
   className?: ClassName
   type: 'Navbar'
 }

src/python-fastui/fastui/__init__.py

@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.19'
+_PREBUILT_VERSION = '0.0.20'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'