improved menu on website

konfig-dev · Oct 21, 2023 · 2dbda6e · 2dbda6e
1 parent 4b99e38
commit 2dbda6e
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 102 deletions.
diff --git a/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx b/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx
@@ -1,108 +1,144 @@
 import {
-  createStyles,
-  Container,
-  rem,
   Group,
   Button,
-  Menu,
   Burger,
   MediaQuery,
+  clsx,
+  NavLink,
+  Transition,
+  MantineTransition,
 } from "@mantine/core";
 import logo from "../../../public/portal-logo-light.png";
 import Image from "@/components/Image";
-import { IconCalendar, IconCalendarEvent } from "@tabler/icons-react";
-import { useState } from "react";
+import { IconCalendarEvent, IconExternalLink } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { scrollIntoView } from "@/utils/scroll-into-view";
 
-const useStyles = createStyles((theme) => ({
-  header: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    height: "100%",
+const scaleY: MantineTransition = {
+  in: {
+    // remove y translation
+    transform: "translateY(0)",
+    opacity: 1,
+    filter: "blur(0)",
   },
-
-  links: {
-    [theme.fn.smallerThan("xs")]: {
-      display: "none",
-    },
-  },
-
-  burger: {
-    [theme.fn.largerThan("xs")]: {
-      display: "none",
-    },
+  out: {
+    // add small Y translation
+    transform: "translateY(16px)",
+    opacity: 0,
+    filter: "blur(12px)",
   },
+  transitionProperty: "transform, opacity, filter",
+};
 
-  link: {
-    display: "block",
-    lineHeight: 1,
-    padding: `${rem(8)} ${rem(12)}`,
-    borderRadius: theme.radius.sm,
-    textDecoration: "none",
-    color:
-      theme.colorScheme === "dark"
-        ? theme.colors.dark[0]
-        : theme.colors.gray[7],
-    fontSize: theme.fontSizes.sm,
-    fontWeight: 500,
+export function HeaderSimple() {
+  const [opened, handlers] = useDisclosure(false);
 
-    "&:hover": {
-      backgroundColor:
-        theme.colorScheme === "dark"
-          ? theme.colors.dark[6]
-          : theme.colors.gray[0],
-    },
-  },
+  const close = () => {
+    handlers.close();
+    document.body && document.body.classList.remove("overflow-hidden");
+  };
 
-  linkActive: {
-    "&, &:hover": {
-      backgroundColor: theme.fn.variant({
-        variant: "light",
-        color: theme.primaryColor,
-      }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor })
-        .color,
-    },
-  },
-}));
-
-export function HeaderSimple() {
-  const { classes } = useStyles();
-  const [opened, setOpened] = useState(false);
+  const open = () => {
+    handlers.open();
+    document.body && document.body.classList.add("overflow-hidden");
+  };
 
   return (
     <div className="h-16 fixed w-full bg-white/95 backdrop-blur-md  z-50">
-      <Container size="lg" className={classes.header}>
-        <Image height={40} src={logo} placeholder="empty" alt="Konfig Logo" />
-        <Menu
-          opened={opened}
-          onChange={setOpened}
-          position="bottom-end"
-          shadow="md"
-          width={200}
+      <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+        <Transition
+          mounted={opened}
+          transition={scaleY}
+          duration={400}
+          timingFunction="ease"
         >
-          <MediaQuery largerThan="sm" styles={{ display: "none" }}>
-            <Menu.Target>
-              <Burger opened={opened} />
-            </Menu.Target>
-          </MediaQuery>
-          <Menu.Dropdown>
-            <a target="_blank" href="https://konfigthis.com/schedule-demo">
-              <Menu.Item
-                className="font-bold"
-                icon={<IconCalendar size={16} />}
-              >
-                Book a Demo
-              </Menu.Item>
-            </a>
-            <a target="_blank" href="/docs">
-              <Menu.Item className="text-gray-700">Documentation</Menu.Item>
-            </a>
-            <a target="_blank" href="/blog">
-              <Menu.Item className=" text-gray-700">Blog</Menu.Item>
-            </a>
-          </Menu.Dropdown>
-        </Menu>
+          {(styles) => (
+            <div
+              style={styles}
+              className={
+                "bg-white absolute top-full w-full h-[calc(100vh-theme(spacing.16))]"
+              }
+            >
+              <NavLink
+                className="text-gray-600 border-t border-solid border-gray-100"
+                label="SDKs"
+                onClick={() => {
+                  close();
+                  scrollIntoView("sdks");
+                }}
+              />
+              <NavLink
+                className="text-gray-600 border-t border-solid border-gray-100"
+                label="Docs"
+                onClick={() => {
+                  close();
+                  scrollIntoView("docs");
+                }}
+              />
+              <NavLink
+                className="text-gray-600 border-t border-solid border-gray-100"
+                label="Demos & Tutorials"
+                onClick={() => {
+                  close();
+                  scrollIntoView("demos");
+                }}
+              />
+              <NavLink
+                className="text-gray-600 border-t border-solid border-gray-100"
+                label="Konfig Documentation"
+                target="_blank"
+                href="/docs"
+                rightSection={<IconExternalLink stroke={1.5} />}
+                component="a"
+              />
+              <NavLink
+                className="text-gray-600 border-t border-solid border-gray-100"
+                label="Blog"
+                rightSection={<IconExternalLink stroke={1.5} />}
+                target="_blank"
+                href="/blog"
+                component="a"
+              />
+              <NavLink
+                className="font-bold border-t border-solid border-gray-100"
+                label="Book a Demo"
+                component="a"
+                href="/schedule-demo"
+                target="_blank"
+                rightSection={<IconCalendarEvent />}
+              />
+            </div>
+          )}
+        </Transition>
+      </MediaQuery>
+      <div className="flex justify-between items-center h-full px-4 mx-auto max-w-5xl">
+        <Image height={40} src={logo} placeholder="empty" alt="Konfig Logo" />
+        <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+          <Burger
+            onClick={() => {
+              if (opened) {
+                close();
+              } else {
+                open();
+              }
+            }}
+            opened={opened}
+          />
+        </MediaQuery>
+
+        {/* <Menu.Dropdown>
+          <a target="_blank" href="https://konfigthis.com/schedule-demo">
+            <Menu.Item className="font-bold" icon={<IconCalendar size={16} />}>
+              Book a Demo
+            </Menu.Item>
+          </a>
+          <a target="_blank" href="/docs">
+            <Menu.Item className="text-gray-700">Documentation</Menu.Item>
+          </a>
+          <a target="_blank" href="/blog">
+            <Menu.Item className=" text-gray-700">Blog</Menu.Item>
+          </a>
+        </Menu.Dropdown> */}
         <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
           <div>
             <Group className="flex" spacing="md">
@@ -133,7 +169,7 @@ export function HeaderSimple() {
             </Group>
           </div>
         </MediaQuery>
-      </Container>
+      </div>
     </div>
   );
 }
diff --git a/konfigthis.com/src/components/OurProducts.tsx b/konfigthis.com/src/components/OurProducts.tsx
@@ -1,3 +1,4 @@
+import { scrollIntoView } from "@/utils/scroll-into-view";
 import { useGraphicStyles } from "@/utils/use-graphic-styles";
 import { UnstyledButton, clsx } from "@mantine/core";
 import {
@@ -87,17 +88,3 @@ function Product({
     </div>
   );
 }
-
-/**
- * Finds the element with the given id and scrolls it into view.
- * @param id
- */
-function scrollIntoView(id: string) {
-  const element = document.getElementById(id);
-
-  if (element) {
-    // set URL to include hash
-    window.history.pushState({}, "", `#${id}`);
-    element.scrollIntoView({ behavior: "smooth", block: "start" });
-  }
-}
diff --git a/konfigthis.com/src/utils/scroll-into-view.ts b/konfigthis.com/src/utils/scroll-into-view.ts
@@ -0,0 +1,13 @@
+/**
+ * Finds the element with the given id and scrolls it into view.
+ * @param id
+ */
+export function scrollIntoView(id: string) {
+  const element = document.getElementById(id);
+
+  if (element) {
+    // set URL to include hash
+    window.history.pushState({}, "", `#${id}`);
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+  }
+}