umwd-components 0.1.31 → 0.1.33

package/dist/cjs/components/NavBar.js

@@ -28,16 +28,23 @@ NavBar.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  })).isRequired
+  })),
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
 };
 function NavBar({
   site_title,
   logo,
-  pages
+  pages = [],
+  tabs = [],
+  maxWidth = "xl"
 }) {
   // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
     setMobileNavOpen(true);
   };
@@ -45,10 +52,14 @@ function NavBar({
     setMobileNavOpen(false);
   };
   const router = navigation.useRouter();
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+    setCurrentTab(newValue);
+  };
   return /*#__PURE__*/React.createElement(material.AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(material.Container, {
-    maxWidth: "xl"
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(material.Toolbar, {
     disableGutters: true,
     sx: {
@@ -91,7 +102,7 @@ function NavBar({
       display: "flex",
       textDecoration: "none"
     }
-  }, site_title))), /*#__PURE__*/React.createElement(material.Box, {
+  }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(material.Box, {
     sx: {
       flexGrow: 1,
       display: {
@@ -243,7 +254,7 @@ function NavBar({
     sx: {
       color: "primary.contrastText"
     }
-  }))))), /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
+  }))))), pages.length > 0 && /*#__PURE__*/React.createElement(material.List, null, pages.map(page => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.ListItem, {
       key: page.name,
       onClick: () => {
@@ -253,7 +264,23 @@ 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,7 @@
   
 import React from 'react';
 import Link from 'next/link';
-import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider } from '@mui/material';
+import { AppBar, Container, Toolbar, Box, Typography, Button, Dialog, List, ListItem, ListItemText, Divider, Tabs, Tab } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useRouter } from 'next/navigation';
@@ -24,16 +24,23 @@ NavBar.propTypes = {
   pages: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     url: PropTypes.string.isRequired
-  })).isRequired
+  })),
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired
+  }))
 };
 function NavBar({
   site_title,
   logo,
-  pages
+  pages = [],
+  tabs = [],
+  maxWidth = "xl"
 }) {
   // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
   const handleOpenMobileMenu = e => {
     setMobileNavOpen(true);
   };
@@ -41,10 +48,14 @@ function NavBar({
     setMobileNavOpen(false);
   };
   const router = useRouter();
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+    setCurrentTab(newValue);
+  };
   return /*#__PURE__*/React.createElement(AppBar, {
     position: "sticky"
   }, /*#__PURE__*/React.createElement(Container, {
-    maxWidth: "xl"
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Toolbar, {
     disableGutters: true,
     sx: {
@@ -87,7 +98,7 @@ function NavBar({
       display: "flex",
       textDecoration: "none"
     }
-  }, site_title))), /*#__PURE__*/React.createElement(Box, {
+  }, site_title))), pages.length > 0 && /*#__PURE__*/React.createElement(Box, {
     sx: {
       flexGrow: 1,
       display: {
@@ -239,7 +250,7 @@ function NavBar({
     sx: {
       color: "primary.contrastText"
     }
-  }))))), /*#__PURE__*/React.createElement(List, null, pages.map(page => {
+  }))))), pages.length > 0 && /*#__PURE__*/React.createElement(List, null, pages.map(page => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
       key: page.name,
       onClick: () => {
@@ -249,7 +260,23 @@ 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.31",
+  "version": "0.1.33",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/NavBar.js

@@ -15,6 +15,8 @@ import {
   ListItem,
   Divider,
   ListItemText,
+  Tabs,
+  Tab,
 } from "@mui/material";
 
 import CloseIcon from "@mui/icons-material/Close";
@@ -36,14 +38,22 @@ NavBar.propTypes = {
       name: PropTypes.string.isRequired,
       url: PropTypes.string.isRequired,
     })
-  ).isRequired,
+  ),
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    })
+  ),
 };
 
-function NavBar({ site_title, logo, pages }) {
+function NavBar({ site_title, logo, pages = [], tabs = [], maxWidth = "xl" }) {
   // handleMobileMenu
 
   const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
 
+  const [currentTab, setCurrentTab] = React.useState(tabs[0]?.name || "");
+
   const handleOpenMobileMenu = (e) => {
     setMobileNavOpen(true);
   };
@@ -54,9 +64,15 @@ function NavBar({ site_title, logo, pages }) {
 
   const router = useRouter();
 
+  const handleChange = (event, newValue) => {
+    console.log(newValue);
+
+    setCurrentTab(newValue);
+  };
+
   return (
     <AppBar position="sticky">
-      <Container maxWidth="xl">
+      <Container maxWidth={maxWidth}>
         <Toolbar disableGutters sx={{ py: 1 }}>
           {/* logo and site title for big screens */}
           <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
@@ -93,31 +109,33 @@ function NavBar({ site_title, logo, pages }) {
           </Link>
 
           {/* Large screen menu */}
-          <Box
-            sx={{
-              flexGrow: 1,
-              display: { xs: "none", md: "flex" },
-              alignItems: "center",
-            }}
-          >
-            {pages.map((page) => {
-              return (
-                <Button
-                  key={page.name}
-                  onClick={() => {
-                    router.push(page.url);
-                  }}
-                  sx={{
-                    my: 2,
-                    color: "primary.contrastText",
-                    display: "block",
-                  }}
-                >
-                  {page.name}
-                </Button>
-              );
-            })}
-          </Box>
+          {pages.length > 0 && (
+            <Box
+              sx={{
+                flexGrow: 1,
+                display: { xs: "none", md: "flex" },
+                alignItems: "center",
+              }}
+            >
+              {pages.map((page) => {
+                return (
+                  <Button
+                    key={page.name}
+                    onClick={() => {
+                      router.push(page.url);
+                    }}
+                    sx={{
+                      my: 2,
+                      color: "primary.contrastText",
+                      display: "block",
+                    }}
+                  >
+                    {page.name}
+                  </Button>
+                );
+              })}
+            </Box>
+          )}
 
           {/* small screen logo and site title */}
           <Link href="/" style={{ textDecoration: "none", color: "unset" }}>
@@ -235,27 +253,55 @@ function NavBar({ site_title, logo, pages }) {
                   </Toolbar>
                 </Container>
               </AppBar>
-              <List>
-                {pages.map((page) => {
-                  return (
-                    <>
-                      <ListItem
-                        key={page.name}
-                        onClick={() => {
-                          router.push(page.url);
-                          handleCloseMobileMenu();
-                        }}
-                      >
-                        <ListItemText primary={page.name} />
-                      </ListItem>
-                      <Divider />
-                    </>
-                  );
-                })}
-              </List>
+              {pages.length > 0 && (
+                <List>
+                  {pages.map((page) => {
+                    return (
+                      <>
+                        <ListItem
+                          key={page.name}
+                          onClick={() => {
+                            router.push(page.url);
+                            handleCloseMobileMenu();
+                          }}
+                        >
+                          <ListItemText primary={page.name} />
+                        </ListItem>
+                        <Divider />
+                      </>
+                    );
+                  })}
+                </List>
+              )}
             </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

@@ -36,3 +36,32 @@ Orefs.args = {
     },
   ],
 };
+
+export const UMWD = Template.bind({});
+
+UMWD.args = {
+  site_title: "UMWD",
+  logo: {
+    url: thumbnail.src,
+    width: 100,
+    height: 100,
+    alt: "Logo",
+  },
+  tabs: [
+    {
+      name: "Resources",
+      link: "/resources",
+      action: () => console.log("Resources"),
+    },
+    {
+      name: "Shop",
+      link: "/shop",
+      action: () => console.log("Shop"),
+    },
+    {
+      name: "Contact",
+      link: "/contact",
+      action: () => console.log("Contact"),
+    },
+  ],
+};