Navbar responsiveness

Author: Isaac-Flath

app.py

@@ -2,35 +2,60 @@
 from fasthtml.common import *
 from functools import partial
 from monsterui.all import *
-from fasthtml.components import Uk_theme_switcher
+import fasthtml.common as fh
+from monsterui.foundations import *
+
 _A = partial(A, target='_blank')
 def Markdown(s, **kw): return Div(render_md(s, class_map_mods={'ul':'uk-list uk-list-bullet space-y-2 mb-6 ml-6 text-lg'}), **kw)
 
 ghurl = 'https://github.com/AnswerDotAI/fasthtml'
 fhurl = 'https://fastht.ml'
 docs = 'https://docs.fastht.ml'
 
+def NavBar(*c, # Component for right side of navbar (Often A tag links)
+           brand=None, # Brand/logo component for left side
+           right_items=None,
+           right_cls='items-center space-x-4', # Spacing for desktop links
+           mobile_cls='space-y-4', # Spacing for mobile links
+           cls='p-4', # Classes for navbar
+           )->FT: # Responsive NavBar
+    "Creates a responsive navigation bar with mobile menu support"
+    menu_id = fh.unqid()
+    mobile_icon = A(UkIcon("menu", width=30, height=30), cls="md:hidden", data_uk_toggle=f"target: #{menu_id}; cls: hidden")
+    return Div(
+        Div(DivFullySpaced(
+                DivLAligned(brand, Div(*c, cls='hidden md:flex space-x-4')), # Brand/logo component for left side
+                mobile_icon, # Hamburger menu icon
+                Div(*right_items,cls=(stringify(right_cls),'hidden md:flex'))), # Desktop Navbar 
+            cls=('monster-navbar', stringify(cls))),
+        DivCentered(*c, *right_items,
+                    cls=(stringify(mobile_cls),stringify(cls),'hidden md:hidden monster-navbar'), 
+                    id=menu_id))
+
+
+def NavLink(*args, cls='', target='_blank', **kw):
+    return fh.A(*args, cls=(cls,TextT.lg), target=target, **kw)
+
 def BstPage(selidx, title, h2s, *c):
     navitems = [('About', '/'), ('Vision', '/vision'), ('Foundations', '/foundation'),
                 ('Technology', '/tech'), ('Components', '/components'), ('Limits', '#', {'disabled':True})]
     logo = 'assets/logo.svg'
-    _NavBarP = partial(P, cls=TextT.lg)
     return (
         Title(title),
         Container(
             # NavBar
-            NavBarContainer(
-                NavBarLSide(
-                    NavBarNav(
-                        Li(A(Img(src=logo), href=fhurl)),
-                        *[Li(A(_NavBarP(k), href=v), cls='uk-active' if selidx==i else '') for i, (k,v) in enumerate(navitems[:-1])],
-                        Li(A(_NavBarP('Limits', href='#'), disabled=True, uk_tooltip='No limits!')))),
-                NavBarRSide(
-                    NavBarNav(
-                        Li(A(_NavBarP("Theme"))),DropDownNavContainer(Div(Uk_theme_switcher(), cls='p-6 uk-drop-close'), cls='w-96'),
-                        Li(_A(_NavBarP('Docs'), href=docs)), 
-                        Li(_A(_NavBarP(UkIcon('github')), href=ghurl)))),
-                cls='bg-green-400/70 rounded-lg rounded-tl-3xl shadow-md p-2 px-4'),
+            NavBar(
+                *[NavLink(k, href=v, target=None, cls=TextT.bold if selidx==i else '') for i, (k,v) in enumerate(navitems[:-1])],
+                NavLink('Limits', href='#', disabled=True, uk_tooltip='No limits!', cls=TextT.gray),
+                brand=A(Img(src=logo), href=fhurl),
+                right_items=[
+                    NavLink("Theme"),  DropDownNavContainer(Div(ThemePicker(font=False, shadows=False, radii=False), cls='p-6 uk-drop-close'), cls='w-96'),
+                    NavLink('Docs', href=docs),
+                    NavLink(UkIcon('github'), href=ghurl),
+                ],
+                cls='bg-green-400/70 rounded-lg rounded-tl-3xl shadow-md p-2 px-4'
+            ),
+
             # Main Content
             Container(
                 Grid(

main.py

@@ -9,7 +9,7 @@
              twitter_site='@answerdotai', image=f'/assets/og-sq.png', url=''),
 )
 
-app,rt = fast_app(pico=False, hdrs=hdrs, live=False)
+app,rt = fast_app(hdrs=hdrs)
 
 app.get('/')(overview.page)
 app.get('/components')(components.page)