umwd-components 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "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"),
+    },
+  ],
+};