HOV-107 | landing page navbar

docs/package.json

@@ -23,6 +23,7 @@
     "@vanilla-extract/webpack-plugin": "^2.1.10",
     "clsx": "^1.1.1",
     "docusaurus-plugin-vanilla-extract": "^1.0.1",
+    "framer-motion": "6.2.4",
     "polished": "^4.1.3",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",

docs/src/components/landing-page/icons/Close.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Icon } from "@hover-design/react";
+import { IIconProps } from "./icon.types";
+
+export const Close = ({
+  height = 24,
+  width = 24,
+  color = "currentColor",
+  ...props
+}: IIconProps) => {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M18 6l-12 12"></path>
+      <path d="M6 6l12 12"></path>
+    </Icon>
+  );
+};

docs/src/components/landing-page/icons/Hamburger.tsx

@@ -0,0 +1,31 @@
+import { Icon } from "@hover-design/react";
+import React from "react";
+import { IIconProps } from "./icon.types";
+
+const Hamburger = ({
+  height = 24,
+  width = 24,
+  color = "currentColor",
+  ...props
+}: IIconProps) => {
+  return (
+    <Icon
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M4 8l16 0"></path>
+      <path d="M4 16l16 0"></path>
+    </Icon>
+  );
+};
+
+export { Hamburger };

docs/src/components/landing-page/icons/icon.types.ts

@@ -0,0 +1,6 @@
+export interface IIconProps {
+  height?: number;
+  width?: number;
+  color?: string;
+  className?: string;
+}

docs/src/components/landing-page/layouts/landing-page-layout/LandingPageLayout.tsx

@@ -0,0 +1,13 @@
+import { primaryThemeClassName } from "@site/src/styles";
+import React from "react";
+import { landingPageLayoutStyles } from "./landing-page-layout.styles.css";
+
+const LandingPageLayout = ({ children }) => {
+  return (
+    <div className={primaryThemeClassName}>
+      <div className={landingPageLayoutStyles}>{children}</div>
+    </div>
+  );
+};
+
+export { LandingPageLayout };

docs/src/components/landing-page/layouts/landing-page-layout/landing-page-layout.styles.css.ts

@@ -0,0 +1,7 @@
+import { themeVars } from "@site/src/styles";
+import { style } from "@vanilla-extract/css";
+
+export const landingPageLayoutStyles = style({
+  backgroundColor: themeVars.colors.baseBackground,
+  color: themeVars.colors.white
+});

docs/src/components/landing-page/navbar/MobileSidebar.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  mobileSidebarIconStyles,
+  mobileSideBarLinkStyles,
+  mobileSidebarStyles
+} from "./mobile-sidebar.styles.css";
+import { Hamburger } from "../icons/Hamburger";
+import { Flex, UnstyledButton } from "@hover-design/react";
+import { navbarStyles, unstyledLinkStyles } from "./navbar.styles.css";
+import HoverLogo from "@site/static/img/hover_logo_letters.svg";
+import { Close } from "../icons/Close";
+import { navbarLinks } from "./navbar.data";
+
+const MobileSidebar = () => {
+  const [isSideBarActive, setIsSideBarActive] = useState(false);
+  return (
+    <div className={mobileSidebarIconStyles}>
+      <UnstyledButton
+        onClick={() => {
+          setIsSideBarActive(true);
+        }}
+      >
+        <Hamburger />
+      </UnstyledButton>
+      {/*Note: Issue with React types of 17 and 18 clashing, need to wait till Docsaurus is moved to 18 TODO  */}
+      {/*@ts-ignore */}
+      <AnimatePresence>
+        {isSideBarActive && (
+          <motion.div
+            className={mobileSidebarStyles}
+            initial={{ transform: "translate(100vw, 0px)" }}
+            animate={{ transform: "translate(0px, 0px)" }}
+            exit={{ transform: "translate(100vw, 0px)" }}
+          >
+            <Flex className={navbarStyles} flexDirection="column" gap={"90px"}>
+              <Flex justifyContent={"space-between"} alignItems={"center"}>
+                <a className={unstyledLinkStyles} href={"/"}>
+                  <HoverLogo />
+                </a>
+                <UnstyledButton
+                  onClick={() => {
+                    setIsSideBarActive(false);
+                  }}
+                >
+                  <Close />
+                </UnstyledButton>
+              </Flex>
+              <Flex flexDirection="column" gap={"12px"}>
+                {navbarLinks.map((link) => (
+                  <p key={link.label} className={mobileSideBarLinkStyles}>
+                    <a className={unstyledLinkStyles} href={link.href}>
+                      {link.label}
+                    </a>
+                  </p>
+                ))}
+              </Flex>
+            </Flex>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export { MobileSidebar };

docs/src/components/landing-page/navbar/Navbar.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  hideLinkOnMobileStyle,
+  navbarLinkStyles,
+  navbarStyles,
+  unstyledLinkStyles
+} from "./navbar.styles.css";
+import HoverLogo from "@site/static/img/hover_logo_letters.svg";
+import GithubLogo from "@site/static/logos/github.svg";
+import { Flex } from "@hover-design/react";
+import { navbarLinks } from "./navbar.data";
+import { MobileSidebar } from "./MobileSidebar";
+
+const Navbar = () => {
+  return (
+    <nav className={navbarStyles}>
+      <Flex justifyContent={"space-between"} alignItems={"center"}>
+        <a className={unstyledLinkStyles} href={"/"}>
+          <HoverLogo />
+        </a>
+        <Flex gap={"55px"}>
+          {navbarLinks.map((link) => (
+            <a
+              key={link.label}
+              className={`${navbarLinkStyles} ${hideLinkOnMobileStyle}`}
+              href={link.href}
+            >
+              {link.label}
+            </a>
+          ))}
+        </Flex>
+        <a
+          className={`${unstyledLinkStyles} ${hideLinkOnMobileStyle}`}
+          href={"https://github.com/antstackio/hover-design"}
+          target="_blank"
+        >
+          <GithubLogo />
+        </a>
+        <MobileSidebar />
+      </Flex>
+    </nav>
+  );
+};
+
+export { Navbar };

docs/src/components/landing-page/navbar/mobile-sidebar.styles.css.ts

@@ -0,0 +1,33 @@
+import { themeVars } from "@site/src/styles";
+import { breakpointMediaQueries } from "@site/src/styles/constants/breakpoints/breakpoints";
+import { style } from "@vanilla-extract/css";
+
+export const mobileSidebarStyles = style({
+  display: "block",
+  position: "fixed",
+  top: 0,
+  left: 0,
+  width: "100vw",
+  height: "100vh",
+  backgroundColor: themeVars.colors.transparent.black[20],
+  backdropFilter: " blur(8.34545px)",
+
+  "@media": {
+    [breakpointMediaQueries.tablet]: {
+      display: "none"
+    }
+  }
+});
+
+export const mobileSidebarIconStyles = style({
+  display: "block",
+  "@media": {
+    [breakpointMediaQueries.tablet]: {
+      display: "none"
+    }
+  }
+});
+
+export const mobileSideBarLinkStyles = style({
+  textAlign: "center"
+});

docs/src/components/landing-page/navbar/navbar.data.ts

@@ -0,0 +1,14 @@
+export const navbarLinks = [
+  {
+    label: "Docs",
+    href: "/docs/intro"
+  },
+  {
+    label: "Components",
+    href: "/docs/category/components"
+  },
+  {
+    label: "Wiki",
+    href: "/docs/wiki/home"
+  }
+];

docs/src/components/landing-page/navbar/navbar.styles.css.ts

@@ -0,0 +1,52 @@
+import { themeVars } from "@site/src/styles";
+import { breakpointMediaQueries } from "@site/src/styles/constants/breakpoints/breakpoints";
+import { style } from "@vanilla-extract/css";
+
+export const navbarStyles = style({
+  padding: "12px 20px 12px 20px",
+  "@media": {
+    [breakpointMediaQueries.desktop]: {
+      padding: "20px 80px 20px 80px"
+    }
+  }
+});
+
+export const navbarLinkStyles = style({
+  color: themeVars.colors.white,
+  textDecoration: "none",
+  fontWeight: 500,
+  lineHeight: "19px",
+
+  ":hover": {
+    color: themeVars.colors.white
+  },
+  ":link": {
+    color: themeVars.colors.white
+  },
+  ":visited": {
+    color: themeVars.colors.white
+  }
+});
+
+export const hideLinkOnMobileStyle = style({
+  display: "none",
+  "@media": {
+    [breakpointMediaQueries.tablet]: {
+      display: "inline"
+    }
+  }
+});
+export const unstyledLinkStyles = style({
+  textDecoration: "none",
+  color: "inherit",
+  lineHeight: 0,
+  ":hover": {
+    color: "inherit"
+  },
+  ":link": {
+    color: "inherit"
+  },
+  ":visited": {
+    color: "inherit"
+  }
+});

docs/src/pages/index.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 import { HoverProvider } from "@hover-design/react";
 import { theme } from "../styles/theme/theme";
-import { primaryThemeClassName } from "../styles";
+
+import { LandingPageLayout } from "../components/landing-page/layouts/landing-page-layout/LandingPageLayout";
+import { Navbar } from "../components/landing-page/navbar/Navbar";
 const HomePage = () => {
   return (
     <HoverProvider value={{ theme }}>
-      <div className={primaryThemeClassName}>Hello World</div>
+      <LandingPageLayout>
+        <Navbar />
+      </LandingPageLayout>
     </HoverProvider>
   );
 };

docs/src/styles/constants/breakpoints/breakpoints.ts

@@ -5,7 +5,7 @@ export const breakpoints = {
 };
 
 export const breakpointMediaQueries = {
-  desktop: `(min-width: ${breakpoints.desktop}px)`,
-  tablet: `(min-width: ${breakpoints.tablet}px)`,
-  mobile: `(min-width: ${breakpoints.mobile}px)`
+  desktop: `screen and (min-width: ${breakpoints.desktop}px)`,
+  tablet: `screen and (min-width: ${breakpoints.tablet}px)`,
+  mobile: `screen and (min-width: ${breakpoints.mobile}px)`
 };

docs/src/styles/constants/colors/colors.ts

@@ -74,5 +74,10 @@ export const colors: IColors = {
     80: "#393939",
     90: "#262626",
     100: "#161616"
+  },
+  white: "#ffffff",
+  baseBackground: "#0A0C12",
+  transparent: {
+    black: { 20: " #1d1d1d66" }
   }
 };

docs/src/styles/constants/colors/colors.types.ts

@@ -18,4 +18,11 @@ export interface IColors {
   green: IColorWeights;
   yellow: IColorWeights;
   gray: IColorWeights;
+  white: string;
+  baseBackground: string;
+  transparent: {
+    black: {
+      20: IColorWeights[20];
+    };
+  };
 }