refactor: Refactor AppBar component

Author: spuxx-dev

apps/solid/src/layout/app-bars/bottom-app-bar.component.tsx

@@ -2,16 +2,14 @@ import { AppBar, Button } from '@spuxx/solid';
 
 export const BottomAppBar = () => {
   return (
-    <AppBar
-      position="bottom"
-      tag="footer"
-      center={
+    <AppBar position="bottom" tag="footer">
+      <AppBar.Section>
         <a href="https://spuxx.dev">
           <Button variant="colored" color="text-default" rounded>
             Made with ❤️ by spuxx
           </Button>
         </a>
-      }
-    />
+      </AppBar.Section>
+    </AppBar>
   );
 };

apps/solid/src/layout/app-bars/top-app-bar.component.tsx

@@ -2,20 +2,24 @@ import { AppBar, Button } from '@spuxx/solid';
 
 export const TopAppBar = () => {
   return (
-    <AppBar
-      left={<Button icon="mdi:menu" title="Menu" variant="colored" color="text-default" rounded />}
-      center={
+    <AppBar>
+      <AppBar.Section>
+        <a href="/">
+          <Button icon="mdi:menu" title="Menu" variant="colored" color="text-default" rounded />
+        </a>
+      </AppBar.Section>
+      <AppBar.Section>
         <a href="/">
           <Button title="Home" variant="colored" color="text-default" rounded>
             @spuxx/solid
           </Button>
         </a>
-      }
-      right={
+      </AppBar.Section>
+      <AppBar.Section>
         <a href="https://github.com/spuxx-dev/jslibs" target="_blank">
           <Button icon="mdi:github" title="GitHub" variant="colored" color="text-default" rounded />
         </a>
-      }
-    />
+      </AppBar.Section>
+    </AppBar>
   );
 };

packages/browser-utils/src/styles/components/layout/app-bar.css

@@ -21,12 +21,7 @@
     bottom: 0;
   }
 
-  /* .spx-app-bar-left,
-  .spx-app-bar-right,
-  .spx-app-bar-center {
-    > .spx-button {
-      height: var(--spx-app-bar-height);
-      font-size: x-large;
-    }
-  } */
+  &:has(.spx-app-bar-section:only-child) {
+    justify-content: center;
+  }
 }

packages/solid/src/components/layout/app-bar/app-bar.component.test.tsx

@@ -10,10 +10,7 @@ describe('AppBar', () => {
     expect(appBar.tagName).toBe('HEADER');
     expect(appBar).toHaveClass('spx', 'spx-app-bar');
     expect(appBar).toHaveAttribute('spx-position', 'top');
-    expect(appBar.children).toHaveLength(3);
-    expect(appBar.children[0]).toHaveClass('spx', 'spx-app-bar-left');
-    expect(appBar.children[1]).toHaveClass('spx', 'spx-app-bar-center');
-    expect(appBar.children[2]).toHaveClass('spx', 'spx-app-bar-right');
+    expect(appBar.children).toHaveLength(0);
   });
 
   it('should render with custom values', () => {
@@ -27,7 +24,11 @@ describe('AppBar', () => {
 
   it('should render with children', () => {
     const { getByRole } = render(() => (
-      <AppBar left={<div>Left</div>} center={<div>Center</div>} right={<div>Right</div>} />
+      <AppBar>
+        <AppBar.Section>Left</AppBar.Section>
+        <AppBar.Section>Center</AppBar.Section>
+        <AppBar.Section>Right</AppBar.Section>
+      </AppBar>
     ));
     const appBar = getByRole('banner');
     expect(appBar).toBeInTheDocument();

packages/solid/src/components/layout/app-bar/app-bar.component.tsx

@@ -1,8 +1,14 @@
 import { AppBarProps, attributes, classNames } from '@src/main';
-import { Component } from 'solid-js';
+import { Component, ParentProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
-export const AppBar: Component<AppBarProps> = (props) => {
+const Section: Component<ParentProps> = (props) => (
+  <div {...classNames('spx-app-bar-section')}>{props.children}</div>
+);
+
+const AppBar: Component<AppBarProps> & {
+  Section: Component<ParentProps>;
+} = ((props) => {
   const { position = 'top', tag = 'header' } = props;
 
   return (
@@ -12,9 +18,12 @@ export const AppBar: Component<AppBarProps> = (props) => {
       component={tag}
       spx-position={position}
     >
-      <div {...classNames('spx-app-bar-left')}>{props.left}</div>
-      <div {...classNames('spx-app-bar-center')}>{props.center}</div>
-      <div {...classNames('spx-app-bar-right')}>{props.right}</div>
+      {props.children}
     </Dynamic>
   );
+}) as Component<AppBarProps> & {
+  Section: Component<ParentProps>;
 };
+AppBar.Section = Section;
+
+export { AppBar };

packages/solid/src/components/layout/app-bar/app-bar.types.ts

@@ -1,10 +1,11 @@
 import { ComponentProps } from '@src/main';
+import { ParentProps } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
 
 /**
  * The AppBar component properties.
  */
-export interface AppBarProps extends ComponentProps<JSX.HTMLAttributes<HTMLElement>> {
+export interface AppBarProps extends ComponentProps<JSX.HTMLAttributes<HTMLElement>>, ParentProps {
   /**
    * The position of the app bar.
    * @default 'top'