umwd-components 0.1.131 → 0.1.132

package/dist/cjs/components/ScrollNavbar.js

@@ -72,7 +72,8 @@ function ScrollNavbar(_ref) {
     height: logo.height,
     alt: logo.alternativeText || "site logo",
     style: {
-      maxHeight: "50px",
+      maxHeight: "55px",
+      marginRight: "20px",
       width: "auto",
       height: "auto"
     }
@@ -114,7 +115,8 @@ function ScrollNavbar(_ref) {
       flexGrow: 1,
       display: {
         xs: "none",
-        md: "flex"
+        md: "flex",
+        alignItems: "center"
       }
     }
   }, /*#__PURE__*/React.createElement(material.Tabs, {

package/dist/esm/components/ScrollNavbar.js

@@ -68,7 +68,8 @@ function ScrollNavbar(_ref) {
     height: logo.height,
     alt: logo.alternativeText || "site logo",
     style: {
-      maxHeight: "50px",
+      maxHeight: "55px",
+      marginRight: "20px",
       width: "auto",
       height: "auto"
     }
@@ -110,7 +111,8 @@ function ScrollNavbar(_ref) {
       flexGrow: 1,
       display: {
         xs: "none",
-        md: "flex"
+        md: "flex",
+        alignItems: "center"
       }
     }
   }, /*#__PURE__*/React__default.createElement(Tabs, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.131",
+  "version": "0.1.132",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/ScrollNavbar.tsx

@@ -22,6 +22,7 @@ import {
 import CloseIcon from "@mui/icons-material/Close";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import ScrollLink from "./ScrollLink.tsx";
+import { type ReactNode } from "react";
 
 interface ImageProps {
   id: number;
@@ -48,7 +49,7 @@ type TabInfo = {
 };
 
 interface NavbarProps {
-  site_title: string;
+  site_title: string | ReactNode;
   logo: ImageProps;
   pages: Page[];
   tabs: TabInfo[];
@@ -102,7 +103,12 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
                   width={logo.width}
                   height={logo.height}
                   alt={logo.alternativeText || "site logo"}
-                  style={{ maxHeight: "50px", width: "auto", height: "auto" }}
+                  style={{
+                    maxHeight: "55px",
+                    marginRight: "20px",
+                    width: "auto",
+                    height: "auto",
+                  }}
                 />
               )}
               {site_title !== undefined && (
@@ -155,7 +161,7 @@ function ScrollNavbar({ data }: { readonly data: NavbarProps }) {
             <Box
               sx={{
                 flexGrow: 1,
-                display: { xs: "none", md: "flex" },
+                display: { xs: "none", md: "flex", alignItems: "center" },
               }}
             >
               <Tabs

package/src/stories/ScrollNavbar.stories.js

@@ -12,8 +12,8 @@ const Template = ({ ...args }) => {
     <>
       <ScrollNavbar {...args} />
       {args.data.tabs.map((tab, index) => {
-        const bgColor = `rgb( ${(index + 1) * 40}, ${(index + 1) * 50}, ${
-          (index + 1) * 30
+        const bgColor = `rgb( ${(index + 1) * 20}, ${(index + 1) * 20}, ${
+          (index + 1) * 20
         })`;
 
         return (
@@ -44,12 +44,21 @@ AMH.args = {
   data: {
     logo: {
       id: "1",
-      url: logoText.src,
+      url: "http://127.0.0.1:1337/uploads/logo_small_f0fcf59dad.png",
       alternativeText: "Logo",
       style: {},
       width: logoText.width,
       height: logoText.height,
     },
+    site_title: (
+      <h1
+        style={{ fontFamily: "Montserrat", fontWeight: 400, fontSize: "24px" }}
+      >
+        <span style={{ fontWeight: 600 }}>A</span>ero
+        <span style={{ fontWeight: 600 }}>M</span>edical{" "}
+        <span style={{ fontWeight: 600 }}>H</span>olland
+      </h1>
+    ), //"AeroMedical Holland",
     tabs: [
       {
         name: "Home",
@@ -73,6 +82,6 @@ AMH.args = {
       },
     ],
     maxWidth: "lg",
-    minHeight: "100px",
+    minHeight: "90px",
   },
 };