feat(docs): add the Navbar page (#87)

* components(navbar): takes full-width of the parent container * components(navbar): nits * fix(docs): small adjustments on some of the pages and components * dosc(preview-code): add the `Class` parameter * feat(docs): add the Navbar page * docs(navbar): update API component references
LumexUI · Oct 27, 2024 · 91345fc · 91345fc
1 parent 030de4f
commit 91345fc
Show file tree

Hide file tree

Showing 40 changed files with 625 additions and 16 deletions.
diff --git a/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs b/docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs
@@ -31,7 +31,7 @@ public class NavigationStore
             .Add( new( nameof( LumexDivider ) ) )
             .Add( new( nameof( LumexIcon ), locked: true ) )
             .Add( new( nameof( LumexLink ) ) )
-            .Add( new( nameof( LumexNavbar ), locked: true ) )
+            .Add( new( nameof( LumexNavbar ) ) )
             .Add( new( nameof( LumexNumbox<T> ), locked: true ) )
             .Add( new( nameof( LumexPopover ), locked: true ) )
             .Add( new( nameof( LumexSwitch ), locked: true ) )

diff --git a/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor b/docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor
@@ -9,7 +9,7 @@
         @foreach( var slot in Slots )
         {
             <li>
-                <strong class="text-orange-500">@slot.Name</strong>: @slot.Description
+                <strong class="text-orange-500">@slot.Name:</strong> @slot.Description
             </li>
         }
     </ul>

diff --git a/docs/LumexUI.Docs.Client/Components/Header.razor b/docs/LumexUI.Docs.Client/Components/Header.razor
@@ -5,14 +5,12 @@
              Bordered="@true"
              MaxWidth="@MaxWidth.XLarge"
              Classes="@_navbarClasses">
-    <LumexNavbarContent>
-        <LumexNavbarBrand>
-            <LumexLink Href="/"
-                       Class="font-bold text-xl text-foreground-900">
-                Lumex<span class="font-normal">UI</span>
-            </LumexLink>
-        </LumexNavbarBrand>
-    </LumexNavbarContent>
+    <LumexNavbarBrand>
+        <LumexLink Href="/"
+                   Class="font-bold text-xl text-foreground-900">
+            Lumex<span class="font-normal">UI</span>
+        </LumexLink>
+    </LumexNavbarBrand>
 
     <LumexNavbarContent Align="@Align.End" Class="hidden sm:flex">
         @foreach( var item in _navItems )

diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor
@@ -2,7 +2,7 @@
 @rendermode InteractiveWebAssembly
 @inject IJSRuntime JSRuntime
 
-<div class="rounded-2xl ring-1 ring-foreground-950/5 shadow-sm overflow-hidden">
+<div class="@BaseClass">
     <Preview Classes="@_previewClasses">
         @ChildContent
     </Preview>

diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs
@@ -11,6 +11,16 @@ public partial class PreviewCode
     [Parameter] public RenderFragment? ChildContent { get; set; }
     [Parameter, EditorRequired] public CodeBlock Code { get; set; } = default!;
     [Parameter] public Preview.Slots? PreviewClasses { get; set; }
+    [Parameter] public string? Class { get; set; }
+
+    private string? BaseClass => ElementClass.Empty()
+        .Add( "rounded-2xl" )
+        .Add( "ring-1" )
+        .Add( "ring-foreground-950/5" )
+        .Add( "shadow-sm" )
+        .Add( "overflow-hidden" )
+        .Add( Class )
+        .ToString();
 
     private string ToolbarClass => ElementClass.Empty()
         .Add( "p-2" )

diff --git a/docs/LumexUI.Docs.Client/Pages/Components/CheckboxGroup/CheckboxGroup.razor b/docs/LumexUI.Docs.Client/Pages/Components/CheckboxGroup/CheckboxGroup.razor
@@ -120,7 +120,7 @@
             category: "Components",
             description: "The checkbox group allows users to select or deselect options from a set.",
             headings: _headings,
-            linksProps: new ComponentLinksProps( "Checkbox", isServer: true )
+            linksProps: new ComponentLinksProps( "Checkbox", isServer: false )
         );
     }
 }
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor
@@ -1,4 +1,4 @@
-<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring-1 ring-black/5 shadow-lg">
+<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring-1 ring-black/5 shadow-md">
     <div class="flex gap-4">
         <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-violet-200 text-black">
             <span class="font-semibold text-lg">RG</span>

diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Link/Link.razor b/docs/LumexUI.Docs.Client/Pages/Components/Link/Link.razor
@@ -65,7 +65,7 @@
 
 <DocsSection Title="Custom Styles">
     <p>
-        You can customize the divider component by passing any Tailwind CSS
+        You can customize the link component by passing any Tailwind CSS
         classes to the component's <Code>Class</Code> and/or <Code>Style</Code> parameters.
     </p>
     <CustomStyles />

diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Blurred.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Blurred.razor
@@ -0,0 +1,34 @@
+<LumexNavbar Blurred="@false"
+             Bordered="@true"
+             Sticky="@true">
+    <LumexNavbarBrand>
+        <span class="font-bold text-xl">
+            Lumex<span class="font-normal">UI</span>
+        </span>
+    </LumexNavbarBrand>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/blurred#"
+                       Color="@ThemeColor.None">
+                Home
+            </LumexLink>
+        </LumexNavbarItem>
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/blurred#"
+                       Color="@ThemeColor.None">
+                About
+            </LumexLink>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexNavbarItem>
+            <LumexButton Size="@Size.Small"
+                         Color="@ThemeColor.Primary"
+                         Variant="@Variant.Flat">
+                Log In
+            </LumexButton>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+</LumexNavbar>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Bordered.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Bordered.razor
@@ -0,0 +1,33 @@
+<LumexNavbar Bordered="@true"
+             Sticky="@true">
+    <LumexNavbarBrand>
+        <span class="font-bold text-xl">
+            Lumex<span class="font-normal">UI</span>
+        </span>
+    </LumexNavbarBrand>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/bordered#"
+                       Color="@ThemeColor.None">
+                Home
+            </LumexLink>
+        </LumexNavbarItem>
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/bordered#"
+                       Color="@ThemeColor.None">
+                About
+            </LumexLink>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexNavbarItem>
+            <LumexButton Size="@Size.Small"
+                         Color="@ThemeColor.Primary"
+                         Variant="@Variant.Flat">
+                Log In
+            </LumexButton>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+</LumexNavbar>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Brand.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Brand.razor
@@ -0,0 +1,32 @@
+<LumexNavbar>
+    <LumexNavbarBrand>
+        <span class="font-bold text-xl">
+            Lumex<span class="font-normal">UI</span>
+        </span>
+    </LumexNavbarBrand>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/brand#"
+                       Color="@ThemeColor.None">
+                Home
+            </LumexLink>
+        </LumexNavbarItem>
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/brand#"
+                       Color="@ThemeColor.None">
+                About
+            </LumexLink>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexNavbarItem>
+            <LumexButton Size="@Size.Small"
+                         Color="@ThemeColor.Primary"
+                         Variant="@Variant.Flat">
+                Log In
+            </LumexButton>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+</LumexNavbar>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/CustomStyles.razor
@@ -0,0 +1,53 @@
+<LumexNavbar Bordered="@true"
+             Sticky="@true"
+             Classes="@_navbarClasses">
+    <LumexNavbarBrand>
+        <span class="font-bold text-xl">
+            Lumex<span class="font-normal">UI</span>
+        </span>
+    </LumexNavbarBrand>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/custom-styles#"
+                       Color="@ThemeColor.None">
+                Home
+            </LumexLink>
+        </LumexNavbarItem>
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/custom-styles#"
+                       Color="@ThemeColor.None">
+                About
+            </LumexLink>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexTextbox Type="@InputType.Search"
+                      Color="@ThemeColor.Info"
+                      Variant="@InputVariant.Flat"
+                      Size="@Size.Small"
+                      Placeholder="Type to search..."
+                      Classes="@_inputClasses">
+            <StartContent>
+                <LumexIcon Icon="@Icons.Rounded.Search" />
+            </StartContent>
+        </LumexTextbox>
+    </LumexNavbarContent>
+</LumexNavbar>
+
+@code {
+    private NavbarSlots _navbarClasses = new()
+        {
+            Root = "border-b-2 border-sky-100",
+            Brand = "bg-clip-text bg-gradient-to-r from-sky-900 to-sky-600 text-transparent",
+            Content = "gap-3",
+            Item = "px-4 py-1.5 rounded-lg text-sky-600 bg-sky-50 font-medium"
+        };
+
+    private InputFieldSlots _inputClasses = new()
+        {
+            Root = "max-w-full sm:max-w-[10rem] h-8",
+            Input = "text-tiny"
+        };
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Height.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Height.razor
@@ -0,0 +1,34 @@
+<LumexNavbar Height="3rem"
+             Bordered="@true"
+             Sticky="@true">
+    <LumexNavbarBrand>
+        <span class="font-bold text-xl">
+            Lumex<span class="font-normal">UI</span>
+        </span>
+    </LumexNavbarBrand>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/height#"
+                       Color="@ThemeColor.None">
+                Home
+            </LumexLink>
+        </LumexNavbarItem>
+        <LumexNavbarItem>
+            <LumexLink Href="/examples/navbar/height#"
+                       Color="@ThemeColor.None">
+                About
+            </LumexLink>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexNavbarItem>
+            <LumexButton Size="@Size.Small"
+                         Color="@ThemeColor.Primary"
+                         Variant="@Variant.Flat">
+                Log In
+            </LumexButton>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+</LumexNavbar>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Menu.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Menu.razor
@@ -0,0 +1,49 @@
+<LumexNavbar>
+    <LumexNavbarContent>
+        <LumexNavbarMenuToggle Class="sm:hidden" />
+        <LumexNavbarBrand>
+            <span class="font-bold text-xl">
+                Lumex<span class="font-normal">UI</span>
+            </span>
+        </LumexNavbarBrand>
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Class="hidden sm:flex">
+        @foreach( var link in _navItems )
+        {
+            <LumexNavbarItem>
+                <LumexLink Href="/examples/navbar/menu#"
+                           Color="@ThemeColor.None">
+                    @link
+                </LumexLink>
+            </LumexNavbarItem>
+        }
+    </LumexNavbarContent>
+
+    <LumexNavbarContent Align="@Align.End">
+        <LumexNavbarItem>
+            <LumexButton Size="@Size.Small"
+                         Color="@ThemeColor.Primary"
+                         Variant="@Variant.Flat">
+                Log In
+            </LumexButton>
+        </LumexNavbarItem>
+    </LumexNavbarContent>
+
+    <LumexNavbarMenu>
+        @foreach( var link in _navItems )
+        {
+            <LumexNavbarMenuItem>
+                <LumexLink Color="@ThemeColor.None">@link</LumexLink>
+            </LumexNavbarMenuItem>
+        }
+    </LumexNavbarMenu>
+</LumexNavbar>
+
+@code {
+    private string[] _navItems = [
+        "Home",
+    "About",
+    "Contact"
+    ];
+}
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Blurred.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Blurred.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/blurred"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.Blurred />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Bordered.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Bordered.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/bordered"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.Bordered />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Brand.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Brand.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/brand"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.Brand />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/CustomStyles.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/custom-styles"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.CustomStyles />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor
@@ -0,0 +1,17 @@
+@inherits LayoutComponentBase
+@layout MainLayout
+
+@Body
+
+<article class="p-6 space-y-4">
+    <h1 class="text-center text-2xl font-bold mb-2">A Cool Story</h1>
+    <p>
+        Jake was preparing his morning smoothie when he accidentally added his dog Max’s kibble instead of chia seeds. Halfway through blending, he realized his mistake. Curious and not wanting to waste food, he decided to take a small sip. To his surprise, Max watched him with a puzzled expression.
+    </p>
+    <p>
+        The next morning, as a joke, Jake made two breakfasts—one for himself with kibble and another for Max with chia seeds. He posted the swap on social media, and people loved it. Encouraged by the reaction, Jake started experimenting with different smoothie flavors, incorporating kibble in creative ways.
+    </p>
+    <p>
+        His new vlog, 'Kibble Kitchen,' featured him taste-testing these unusual recipes and capturing Max’s reactions. The concept went viral, and Jake and Max quickly became a sensation. Before long, they landed a sponsorship from a pet food company, turning their accidental smoothie swap into a full-fledged business. Together, they became an influencer duo, delighting fans with their daily breakfast adventures.
+    </p>
+</article>
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Height.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Height.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/height"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.Height />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/MaxWidth.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/MaxWidth.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/max-width"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples._MaxWidth />
diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Menu.razor b/docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/Menu.razor
@@ -0,0 +1,5 @@
+@page "/examples/navbar/menu"
+@layout ExampleLayout
+@rendermode InteractiveWebAssembly
+
+<LumexUI.Docs.Client.Pages.Components.Navbar.Examples.Menu />