Improve data hydration, fix CSS on mobile (#55)

* added better hydration logic, error handling

* Added tailwind option to readme, fixed styling on mobile

Author: Harry-Ross

README.md

@@ -17,10 +17,26 @@ pnpm add ssw.megamenu
 
 2. Import the generated styles
 
-**NOTE: If you have TailwindCSS installed in your project, you can skip this step**
-
 ```javascript
-import "ssw.megamenu/style.css";
+import "ssw.megamenu/dist/style.css";
+```
+
+**NOTE: If you have TailwindCSS installed in your project, you can instead list the `ssw.megamenu` package in your `tailwind.config.js` content array like so:**
+
+```js
+// tailwind.config.js
+
+// ...
+
+module.exports = {
+  // ...
+  content: [
+    // ...
+    "node_modules/ssw.megamenu/**/*.js",
+  ],
+  // ...
+};
+
 ```
 
 3. You can then use the components in your React app like so:

lib/components/MegaMenuLayout/MegaMenuLayout.tsx

@@ -41,7 +41,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
 
   return (
     <>
-      <div className="relative z-10 flex h-16 w-full items-center justify-center sm:h-[120px]">
+      <div className="relative z-10 flex w-full items-center justify-center sm:h-[120px]">
         <nav
           className="flex h-full w-full items-center justify-between gap-x-4 overflow-hidden px-0"
           aria-label="Global"
@@ -105,7 +105,7 @@ const MegaMenuLayout: React.FC<MegaMenuWrapperProps> = ({
           <RightSideActions />
         </div>
       ) : (
-        <PhoneButton className="pb-4 sm:hidden" />
+        <PhoneButton className="flex-grow pb-4 sm:hidden" />
       )}
     </>
   );

lib/components/PhoneButton/PhoneButton.tsx

@@ -21,7 +21,7 @@ export const PhoneButton = ({ className }: PhoneButtonProps) => {
       <CustomLink
         href={url}
         className={cx(
-          "flex h-12 w-fit shrink-0 cursor-pointer items-center justify-center rounded-lg bg-ssw-red px-5 text-xl hover:opacity-70",
+          "flex h-12 w-full shrink-0 cursor-pointer items-center justify-center rounded-lg bg-ssw-red px-5 text-xl hover:opacity-70 max-sm:my-5 sm:w-fit",
         )}
       >
         <FaPhoneAlt color="white" className="text-2xl" />

lib/components/SubMenuGroup/SubMenuWidget.tsx

@@ -26,7 +26,7 @@ const SubMenuWidget: React.FC<SubMenuWidgetProps> = ({ item }) => {
     case "bookNow": {
       return (
         <CustomLink
-          className="relative flex w-full cursor-pointer items-center justify-center rounded-md bg-ssw-red font-semibold text-white hover:bg-ssw-light-red"
+          className="relative flex w-full cursor-pointer items-center justify-center rounded-md bg-ssw-red font-semibold !text-white hover:bg-ssw-light-red"
           href={item.url}
         >
           <MegaIcon icon="phone" className="h-6" />

lib/hooks/useMenuItems.ts

@@ -5,7 +5,6 @@ const API_URL = "https://www.ssw.com.au/api/get-megamenu";
 
 const refreshData = async () => {
   const res = await fetch(API_URL);
-
   const json = await res.json();
 
   const { menuGroups } = json;
@@ -16,16 +15,19 @@ const refreshData = async () => {
 export const useMenuItems = (
   menuBarItems?: NavMenuGroup[],
 ): { menuItems: NavMenuGroup[] } => {
-  const [menuItems, setMenuItems] = useState<NavMenuGroup[] | null>([]);
+  const [menuItems, setMenuItems] = useState<NavMenuGroup[]>(
+    menuBarItems || [],
+  );
 
   useEffect(() => {
-    if (menuBarItems) {
-      setMenuItems(menuBarItems);
-    } else {
-      refreshData().then((data) => {
+    refreshData()
+      .then((data) => {
         setMenuItems(data);
+      })
+      .catch((err) => {
+        setMenuItems(menuBarItems || []);
+        console.error(err);
       });
-    }
   }, [menuBarItems]);
 
   return { menuItems: menuItems || [] };