umwd-components 0.1.42 → 0.1.44

package/dist/cjs/components/NavBar.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var Link = require('next/link');
+var Image = require('next/image');
 var material = require('@mui/material');
 var CloseIcon = require('@mui/icons-material/Close');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
@@ -80,21 +81,15 @@ function NavBar({
       cursor: "pointer",
       alignItems: "center"
     }
-  }, /*#__PURE__*/React.createElement(material.Box, {
-    sx: {
-      display: "flex",
-      mr: 1
-    }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(Image, {
     src: logo.url,
-    width: logo.width || "32px",
-    height: logo.height || "32px",
-    alt: "site logo",
+    width: logo.height >= 50 ? logo.width / logo.height * 50 : logo.width,
+    height: logo.height,
+    alt: logo.alt || "site logo",
     style: {
-      maxWidth: "60px",
-      maxHeight: "60px"
+      maxHeight: "50px"
     }
-  })), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
+  }), site_title !== undefined && /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
     noWrap: true,
     component: "h1",
@@ -102,7 +97,12 @@ function NavBar({
       display: "flex",
       textDecoration: "none"
     }
-  }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
+  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      display: "block",
+      width: "30px"
+    }
+  }), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
       flexGrow: 1,
       display: {
@@ -123,7 +123,31 @@ function NavBar({
         display: "block"
       }
     }, page.name);
-  })), /*#__PURE__*/React.createElement(Link, {
+  })), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      flexGrow: 1,
+      display: {
+        xs: "none",
+        md: "flex"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(material.Tabs, {
+    value: currentTab,
+    onChange: (event, newValue) => handleChange(event, newValue),
+    "aria-label": "wrapped label tabs example",
+    textColor: "secondary",
+    indicatorColor: "secondary",
+    variant: "fullWidth"
+  }, tabs.length > 0 && tabs.map(tab => {
+    return /*#__PURE__*/React.createElement(material.Tab, {
+      key: tab.name,
+      value: tab.name,
+      label: tab.name,
+      onClick: () => {
+        router.push(tab.url);
+      }
+    });
+  }))), /*#__PURE__*/React.createElement(Link, {
     href: "/",
     style: {
       textDecoration: "none",
@@ -264,23 +288,7 @@ function NavBar({
     }, /*#__PURE__*/React.createElement(material.ListItemText, {
       primary: page.name
     })), /*#__PURE__*/React.createElement(material.Divider, null));
-  }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(material.Tabs, {
-    value: currentTab,
-    onChange: (event, newValue) => handleChange(event, newValue),
-    "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
-    indicatorColor: "secondary",
-    variant: "fullWidth"
-  }, tabs.length > 0 && tabs.map(tab => {
-    return /*#__PURE__*/React.createElement(material.Tab, {
-      key: tab.name,
-      value: tab.name,
-      label: tab.name,
-      onClick: () => {
-        router.push(tab.url);
-      }
-    });
-  }))));
+  })))))));
 }
 
 exports.default = NavBar;

package/dist/esm/components/NavBar.js

@@ -7,7 +7,8 @@
   
 import React from 'react';
 import Link from 'next/link';
-import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider, Tabs, Tab } from '@mui/material';
+import Image from 'next/image';
+import { AppBar, Container, Toolbar, Box, Typography, Button, Tabs, Tab, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useRouter } from 'next/navigation';
@@ -76,21 +77,15 @@ function NavBar({
       cursor: "pointer",
       alignItems: "center"
     }
-  }, /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      display: "flex",
-      mr: 1
-    }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(Image, {
     src: logo.url,
-    width: logo.width || "32px",
-    height: logo.height || "32px",
-    alt: "site logo",
+    width: logo.height >= 50 ? logo.width / logo.height * 50 : logo.width,
+    height: logo.height,
+    alt: logo.alt || "site logo",
     style: {
-      maxWidth: "60px",
-      maxHeight: "60px"
+      maxHeight: "50px"
     }
-  })), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
+  }), site_title !== undefined && /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     noWrap: true,
     component: "h1",
@@ -98,7 +93,12 @@ function NavBar({
       display: "flex",
       textDecoration: "none"
     }
-  }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
+  }, site_title))), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "block",
+      width: "30px"
+    }
+  }), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
     sx: {
       flexGrow: 1,
       display: {
@@ -119,7 +119,31 @@ function NavBar({
         display: "block"
       }
     }, page.name);
-  })), /*#__PURE__*/React.createElement(Link, {
+  })), tabs.length > 0 && /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      flexGrow: 1,
+      display: {
+        xs: "none",
+        md: "flex"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    value: currentTab,
+    onChange: (event, newValue) => handleChange(event, newValue),
+    "aria-label": "wrapped label tabs example",
+    textColor: "secondary",
+    indicatorColor: "secondary",
+    variant: "fullWidth"
+  }, tabs.length > 0 && tabs.map(tab => {
+    return /*#__PURE__*/React.createElement(Tab, {
+      key: tab.name,
+      value: tab.name,
+      label: tab.name,
+      onClick: () => {
+        router.push(tab.url);
+      }
+    });
+  }))), /*#__PURE__*/React.createElement(Link, {
     href: "/",
     style: {
       textDecoration: "none",
@@ -260,23 +284,7 @@ function NavBar({
     }, /*#__PURE__*/React.createElement(ListItemText, {
       primary: page.name
     })), /*#__PURE__*/React.createElement(Divider, null));
-  }))))), tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs, {
-    value: currentTab,
-    onChange: (event, newValue) => handleChange(event, newValue),
-    "aria-label": "wrapped label tabs example",
-    textColor: "secondary",
-    indicatorColor: "secondary",
-    variant: "fullWidth"
-  }, tabs.length > 0 && tabs.map(tab => {
-    return /*#__PURE__*/React.createElement(Tab, {
-      key: tab.name,
-      value: tab.name,
-      label: tab.name,
-      onClick: () => {
-        router.push(tab.url);
-      }
-    });
-  }))));
+  })))))));
 }
 
 export { NavBar as default };

package/package.json

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

package/src/components/NavBar.js

@@ -2,6 +2,7 @@
 
 import React from "react";
 import Link from "next/link";
+import Image from "next/image";
 
 import {
   Dialog,
@@ -83,7 +84,7 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
                 alignItems: "center",
               }}
             >
-              <Box sx={{ display: "flex", mr: 1 }}>
+              {/* <Box sx={{ display: "flex", mr: 1 }}>
                 <img
                   src={logo.url}
                   width={logo.width || "32px"}
@@ -91,7 +92,18 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
                   alt="site logo"
                   style={{ maxWidth: "60px", maxHeight: "60px" }}
                 />
-              </Box>
+              </Box> */}
+              <Image
+                src={logo.url}
+                width={
+                  logo.height >= 50
+                    ? (logo.width / logo.height) * 50
+                    : logo.width
+                }
+                height={logo.height}
+                alt={logo.alt || "site logo"}
+                style={{ maxHeight: "50px" }}
+              />
               {site_title !== undefined && (
                 <Typography
                   variant="h6"
@@ -108,6 +120,8 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Box>
           </Link>
 
+          <Box sx={{ display: "block", width: "30px" }}></Box>
+
           {/* Large screen menu */}
           {pages.length > 0 && (
             <Box
@@ -137,6 +151,39 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Box>
           )}
 
+          {/* Tabs */}
+          {tabs.length > 0 && (
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: { xs: "none", md: "flex" },
+              }}
+            >
+              <Tabs
+                value={currentTab}
+                onChange={(event, newValue) => handleChange(event, newValue)}
+                aria-label="wrapped label tabs example"
+                textColor="secondary"
+                indicatorColor="secondary"
+                variant="fullWidth"
+              >
+                {tabs.length > 0 &&
+                  tabs.map((tab) => {
+                    return (
+                      <Tab
+                        key={tab.name}
+                        value={tab.name}
+                        label={tab.name}
+                        onClick={() => {
+                          router.push(tab.url);
+                        }}
+                      />
+                    );
+                  })}
+              </Tabs>
+            </Box>
+          )}
+
           {/* small screen logo and site title */}
           <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
             <Box
@@ -276,32 +323,6 @@ function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
             </Dialog>
           </Box>
         </Toolbar>
-
-        {/* Tabs */}
-        {tabs.length > 0 && (
-          <Tabs
-            value={currentTab}
-            onChange={(event, newValue) => handleChange(event, newValue)}
-            aria-label="wrapped label tabs example"
-            textColor="secondary"
-            indicatorColor="secondary"
-            variant="fullWidth"
-          >
-            {tabs.length > 0 &&
-              tabs.map((tab) => {
-                return (
-                  <Tab
-                    key={tab.name}
-                    value={tab.name}
-                    label={tab.name}
-                    onClick={() => {
-                      router.push(tab.url);
-                    }}
-                  />
-                );
-              })}
-          </Tabs>
-        )}
       </Container>
     </AppBar>
   );

package/src/stories/Navbar.stories.js

@@ -1,6 +1,7 @@
 import NavBar from "../components/NavBar";
 import React from "react";
 import thumbnail from "../../public/placeholders/thumbnail_100X100.png";
+import logoText from "../../public/logo_text.png";
 
 export default {
   title: "UMWD/NavBar",
@@ -65,3 +66,31 @@ UMWD.args = {
     },
   ],
 };
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  logo: {
+    url: logoText.src,
+    width: logoText.width,
+    height: logoText.height,
+    alt: "Logo",
+  },
+  tabs: [
+    {
+      name: "Resources",
+      link: "/resources",
+      action: () => console.log("Services"),
+    },
+    {
+      name: "Shop",
+      link: "/shop",
+      action: () => console.log("About"),
+    },
+    {
+      name: "Contact",
+      link: "/contact",
+      action: () => console.log("Contact"),
+    },
+  ],
+};