From 858a3747555a3cac808ea88867f1a40ce6bd8fd0 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 11:58:50 +0430 Subject: [PATCH 1/8] docs: update readme --- README.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index b604ceef2..0bdf05db1 100644 --- a/README.md +++ b/README.md @@ -7,17 +7,22 @@ License + + Total Downloads + + + Version + +

+

License - - Version - - - Open Issues + + Total Downloads - - Closed Issues + + Version

From 1302b3f2601fffaf771ba0b471cba4661e5db282 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 11:59:03 +0430 Subject: [PATCH 2/8] docs: add MobileNav to slug --- pages/docs/[...slug].tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx index 79c34c98d..94d11d02b 100644 --- a/pages/docs/[...slug].tsx +++ b/pages/docs/[...slug].tsx @@ -61,6 +61,7 @@ import { MenuHandler, MenuList, MenuItem, + MobileNav, Navbar, Option, Popover, @@ -121,17 +122,17 @@ const components = { ), p: (props) => ( - + ), - hr: () =>
, + hr: () =>
, a: (props) => ( ), @@ -145,13 +146,13 @@ const components = { tr: (props) => , th: (props) => ( ), td: (props) => ( ), @@ -192,6 +193,7 @@ const components = { MenuHandler, MenuList, MenuItem, + MobileNav, Navbar, Option, Popover, From b9f7046a7576c82089c1f490ab7c3e7708b88726 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 11:59:42 +0430 Subject: [PATCH 3/8] react: update navbar and mobile nav --- .../src/components/Navbar/MobileNav.tsx | 2 +- .../src/theme/components/navbar/index.ts | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx b/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx index 57ec11dbb..a69ce2170 100644 --- a/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx +++ b/packages/material-tailwind-react/src/components/Navbar/MobileNav.tsx @@ -64,7 +64,7 @@ export const MobileNav = React.forwardRef( }, mount: { opacity: 1, - height: `${mobileNavRef.current?.scrollHeight + 16}px`, + height: `${mobileNavRef.current?.scrollHeight}px`, transition: { duration: 0.3, times: "[0.4, 0, 0.2, 1]" }, }, }; diff --git a/packages/material-tailwind-react/src/theme/components/navbar/index.ts b/packages/material-tailwind-react/src/theme/components/navbar/index.ts index 450841b04..0fe9b8ca1 100644 --- a/packages/material-tailwind-react/src/theme/components/navbar/index.ts +++ b/packages/material-tailwind-react/src/theme/components/navbar/index.ts @@ -59,9 +59,7 @@ export const navbar: NavbarStylesType = { base: { navbar: { initial: { - display: "flex", - flexWrap: "flex-nowrap", - justifyContent: "justify-start", + display: "block", width: "w-full", maxWidth: "max-w-screen-2xl", borderRadius: "rounded-xl", @@ -88,7 +86,6 @@ export const navbar: NavbarStylesType = { display: "block", width: "w-full", basis: "basis-full", - rounded: "rounded-xl", overflow: "overflow-hidden", }, }, From 3985500d9ec88ce91a72f6bad5c9a37addf6f56b Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 11:59:48 +0430 Subject: [PATCH 4/8] docs: update navbar --- components/layout/navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx index b3988e61e..d02af6a0a 100644 --- a/components/layout/navbar.tsx +++ b/components/layout/navbar.tsx @@ -174,7 +174,7 @@ export default function Navbar({ > Date: Tue, 2 Aug 2022 11:59:57 +0430 Subject: [PATCH 5/8] docs-react: update navbar page --- documentation/react/navbar.mdx | 319 +++++++++++++++++++++------------ 1 file changed, 201 insertions(+), 118 deletions(-) diff --git a/documentation/react/navbar.mdx b/documentation/react/navbar.mdx index 88f20defe..0a6487a28 100644 --- a/documentation/react/navbar.mdx +++ b/documentation/react/navbar.mdx @@ -28,142 +28,225 @@ See below our simple Navbar example that you can use in your Tailwi
- - - - - + {open ? ( + + + + ) : ( + + + + )} + + + + + + + + )} + + + + ```jsx -import { Navbar, Button, Typography } from "@material-tailwind/react"; +import { useState, useEffect } from "react"; +import { + Navbar, + MobileNav, + Typography, + Button, + IconButton, +} from "@material-tailwind/react"; -export default function Example() { - const icon = ( - - - +export default function Test() { + const [openNav, setOpenNav] = useState(false); + + useEffect(() => { + window.addEventListener( + "resize", + () => window.innerWidth >= 960 && setOpenNav(false) + ); + }, []); + + const navList = ( + ); return ( - -
+ +
- Material Tailwind + Material Tailwind - - + setOpenNav(!openNav)} + > + {openNav ? ( + + + + ) : ( + + + + )} +
+ + {navList} + + ); } From f31d4263a93a213080c6ded9b36a0085e57304be Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 12:00:14 +0430 Subject: [PATCH 6/8] react: update avatar styles object --- .../src/theme/components/avatar/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/material-tailwind-react/src/theme/components/avatar/index.ts b/packages/material-tailwind-react/src/theme/components/avatar/index.ts index 0cba34c90..5a0e2d588 100644 --- a/packages/material-tailwind-react/src/theme/components/avatar/index.ts +++ b/packages/material-tailwind-react/src/theme/components/avatar/index.ts @@ -48,32 +48,32 @@ export const avatar: AvatarStyleTypes = { }, sizes: { xs: { - with: "w-6", + width: "w-6", height: "h-6", borderRadius: "rounded-md", }, sm: { - with: "w-9", + width: "w-9", height: "h-9", borderRadius: "rounded-md", }, md: { - with: "w-12", + width: "w-12", height: "h-12", borderRadius: "rounded-lg", }, lg: { - with: "w-[58px]", + width: "w-[58px]", height: "h-[58px]", borderRadius: "rounded-lg", }, xl: { - with: "w-[74px]", + width: "w-[74px]", height: "h-[74px]", borderRadius: "rounded-xl", }, xxl: { - with: "w-[110px]", + width: "w-[110px]", height: "h-[110px]", borderRadius: "rounded-2xl", }, From d2d929cd2f1242c637f3aa8f2b10923077447844 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 12:00:39 +0430 Subject: [PATCH 7/8] react: update to v1.2.1 --- packages/material-tailwind-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json index b64852432..0d631afdd 100644 --- a/packages/material-tailwind-react/package.json +++ b/packages/material-tailwind-react/package.json @@ -1,7 +1,7 @@ { "name": "@material-tailwind/react", "homepage": "https://material-tailwind.com", - "version": "1.2.0", + "version": "1.2.1", "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.", "repository": "https://github.com/creativetimofficial/material-tailwind", "license": "MIT", From 8d10458b5e3655f53ea468c077588f1d462a2d0d Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 2 Aug 2022 12:04:08 +0430 Subject: [PATCH 8/8] update readme files --- README.md | 2 +- packages/material-tailwind-react/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0bdf05db1..4b9ad252d 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Total Downloads - Version + Version

diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md index fa2781717..27ff9ef6f 100644 --- a/packages/material-tailwind-react/README.md +++ b/packages/material-tailwind-react/README.md @@ -8,7 +8,7 @@ Total Downloads - Version + Version Licenese