feat: mobile nav bar

src/components/Button/Button.tsx

@@ -42,7 +42,7 @@ export const Button: React.FC<ButtonProps> = ({
     <Component
       className={classNames(
         "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:transition-default-animation ink:box-border",
-        "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:select-none ink:no-underline",
+        "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:shrink-0 ink:select-none ink:no-underline",
         variantClassNames(size, {
           sm: "ink:px-2 ink:py-1.5 ink:text-body-2-bold ink:h-5",
           md: "ink:px-3 ink:py-2 ink:text-body-2-bold ink:h-6",

src/components/SegmentedControl/SegmentedControl.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { DisplayOnProps } from "../../util/theme";
 import { Slot } from "../Slot";
+import { useWindowSize } from "../../hooks/useWindowSize";
 
 export type SegmentedControlProps<TOptionValue extends string> =
   DisplayOnProps & {
@@ -34,6 +35,7 @@ export const SegmentedControl = <TOptionValue extends string>({
     () => options.findIndex((opt) => opt.value === selectedOption),
     [options, selectedOption]
   );
+  const windowWidth = useWindowSize();
 
   const [isMounted, setIsMounted] = useState(false);
   useEffect(() => {
@@ -53,13 +55,13 @@ export const SegmentedControl = <TOptionValue extends string>({
       left: selectedElement?.offsetLeft || 0,
       width: selectedElement?.offsetWidth || 0,
     };
-  }, [itemsRef, selectedIndex, isMounted]);
+  }, [itemsRef, selectedIndex, isMounted, windowWidth]);
 
   return (
     <div className="ink:relative ink:font-default">
       {isMounted && selectedOption && (
         <div
-          className="ink:absolute ink:py-0.5 ink:box-border ink:transition-all ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
+          className="ink:absolute ink:py-0.5 ink:box-border ink:transition-[left,width] ink:transition-default-animation"
           style={{
             top: 0,
             bottom: 0,

src/hooks/useWindowBreakpoint.ts

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useWindowSize } from "./useWindowSize";
+
+const BREAKPOINTS = {
+  md: 768,
+  lg: 1024,
+};
+
+export const useIsUnderWindowBreakpoint = ({
+  size,
+}: {
+  size: keyof typeof BREAKPOINTS;
+}) => {
+  const { width } = useWindowSize();
+
+  return useMemo(() => {
+    return width < BREAKPOINTS[size];
+  }, [width, size]);
+};

src/hooks/useWindowSize.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+interface WindowSize {
+  width: number;
+  height: number;
+}
+
+export const useWindowSize = (): WindowSize => {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+};

src/layout/ForStories/ExampleLayoutLinks.tsx

@@ -0,0 +1,17 @@
+import { InkIcon } from "../..";
+import { InkLayoutLink } from "../InkLayout/InkNavLink";
+
+export const EXAMPLE_LINKS: InkLayoutLink[] = [
+  {
+    children: "Home",
+    href: "#home",
+    icon: <InkIcon.Home />,
+    target: "_self",
+  },
+  {
+    children: "Settings",
+    href: "#settings",
+    icon: <InkIcon.Settings />,
+    target: "_self",
+  },
+];

src/layout/ForStories/ExampleMobileNav.tsx

@@ -0,0 +1,11 @@
+import { EXAMPLE_LINKS } from "./ExampleLayoutLinks";
+import {
+  InkLayoutMobileNav,
+  InkLayoutMobileNavProps,
+} from "../InkLayout/MobileNav";
+
+export const ExampleMobileNav = (
+  props: Omit<InkLayoutMobileNavProps, "links">
+) => {
+  return <InkLayoutMobileNav links={EXAMPLE_LINKS} {...props} />;
+};

src/layout/ForStories/ExampleSideNav.tsx

@@ -1,23 +1,6 @@
-import { InkIcon } from "../..";
 import { InkLayoutSideNav } from "../InkLayout";
+import { EXAMPLE_LINKS } from "./ExampleLayoutLinks";
 
 export const ExampleSideNav = () => {
-  return (
-    <InkLayoutSideNav
-      links={[
-        {
-          children: "Home",
-          href: "#home",
-          icon: <InkIcon.Home />,
-          target: "_self",
-        },
-        {
-          children: "Settings",
-          href: "#settings",
-          icon: <InkIcon.Settings />,
-          target: "_self",
-        },
-      ]}
-    />
-  );
+  return <InkLayoutSideNav links={EXAMPLE_LINKS} />;
 };

src/layout/InkLayout/InkLayout.stories.tsx

@@ -5,6 +5,7 @@ import { InkPageLayout } from "../InkParts/InkPageLayout";
 import { ExampleSideNav } from "../ForStories/ExampleSideNav";
 import { ExampleTopNav } from "../ForStories/ExampleTopNav";
 import { InkPanel } from "../InkParts/InkPanel";
+import { ExampleMobileNav } from "../ForStories/ExampleMobileNav";
 
 /**
  * This layout component provides a unified layout that can be used for most pages.
@@ -29,6 +30,9 @@ const meta: Meta<InkLayoutProps> = {
     headerContent: <div>Header content</div>,
     topNavigation: <ExampleTopNav />,
     sideNavigation: <ExampleSideNav />,
+    mobileNavigation: (props) => (
+      <ExampleMobileNav onLinkClick={props.closeMobileNavigation} />
+    ),
   },
 };
 

src/layout/InkLayout/InkLayout.tsx

@@ -1,44 +1,109 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useState } from "react";
 import { DefaultAppIcon } from "../../icons";
 import { classNames } from "../../util/classes";
+import { Button, InkIcon } from "../..";
 
 export interface InkLayoutProps extends PropsWithChildren {
   mainIcon?: React.ReactNode;
   headerContent?: React.ReactNode;
   sideNavigation?: React.ReactNode;
   topNavigation?: React.ReactNode;
+  mobileNavigation?: ({
+    closeMobileNavigation,
+  }: {
+    closeMobileNavigation: () => void;
+  }) => React.ReactNode;
 }
 
 export const InkLayout: React.FC<InkLayoutProps> = ({
   mainIcon = <DefaultAppIcon className="ink:size-6" />,
   headerContent,
   sideNavigation,
   topNavigation,
+  mobileNavigation,
   children,
 }) => {
+  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
+  const hasSomethingInHeader = !!headerContent || !!mobileNavigation;
   return (
-    <div
-      className={classNames(
-        "ink:flex ink:flex-col ink:min-h-full ink:pb-5 ink:min-w-[320px] ink:font-default ink:text-text-default ink:gap-5 ink:box-border"
-      )}
-    >
-      <div className="ink:w-full ink:flex ink:justify-between ink:items-center ink:gap-3 ink:px-5 ink:pt-4 ink:box-border">
-        <div className="ink:flex ink:items-center ink:justify-start ink:size-6 ink:gap-2">
-          {mainIcon}
-        </div>
-        {topNavigation && <div>{topNavigation}</div>}
-        {headerContent ? (
-          <div className="ink:flex ink:items-center">{headerContent}</div>
-        ) : null}
-      </div>
-      <div className="ink:flex ink:flex-1 ink:mr-5 ink:box-border">
-        {sideNavigation && (
-          <div className={classNames("ink:w-[260px] ink:px-4")}>
-            {sideNavigation}
-          </div>
+    <>
+      <div
+        className={classNames(
+          "ink:flex ink:flex-col ink:min-h-full ink:pb-5 ink:min-w-[320px] ink:font-default ink:text-text-default ink:gap-5 ink:box-border"
         )}
-        {children}
+      >
+        <div className="ink:w-full ink:flex ink:justify-between ink:items-center ink:gap-3 ink:px-5 ink:pt-4 ink:box-border">
+          <div className="ink:flex ink:items-center ink:justify-start ink:size-6 ink:gap-2">
+            {mainIcon}
+          </div>
+          <div className="ink:flex ink:flex-1 ink:justify-center ink:items-center">
+            {isMobileNavOpen && (
+              <div className="ink:text-h3 ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0">
+                Menu
+              </div>
+            )}
+            {topNavigation && (
+              <div className="ink:hidden ink:lg:block">{topNavigation}</div>
+            )}
+          </div>
+          {hasSomethingInHeader && (
+            <div className="ink:flex ink:gap-1 ink:justify-end ink:items-center">
+              {!isMobileNavOpen && headerContent && (
+                <div className="ink:flex ink:items-center">{headerContent}</div>
+              )}
+              {mobileNavigation && (
+                <Button
+                  variant="wallet"
+                  size="md"
+                  rounded="full"
+                  className="ink:lg:hidden"
+                  onClick={() => setIsMobileNavOpen(!isMobileNavOpen)}
+                >
+                  {isMobileNavOpen ? <InkIcon.Close /> : <InkIcon.Menu />}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+        <div
+          className={classNames(
+            "ink:flex ink:flex-1 ink:mx-5 ink:box-border",
+            sideNavigation && "ink:lg:ml-0"
+          )}
+        >
+          {sideNavigation && (
+            <div
+              className={classNames(
+                "ink:w-[260px] ink:px-4 ink:hidden ink:lg:block"
+              )}
+            >
+              {sideNavigation}
+            </div>
+          )}
+          {children}
+        </div>
       </div>
-    </div>
+      {isMobileNavOpen && (
+        <div
+          style={
+            {
+              /** 48px components height + 32px top spacing + 32px spacing between header and content */
+              "--ink-mobile-nav-height":
+                "calc(var(--ink-spacing-6) + var(--ink-spacing-4) + var(--ink-spacing-4))",
+            } as React.CSSProperties
+          }
+          className={classNames(
+            "ink:fixed ink:lg:hidden ink:lg:pointer-events-none ink:inset-0 ink:top-[var(--ink-mobile-nav-height)] ink:z-50",
+            "ink:bg-background-light/20 ink:backdrop-blur-xl",
+            "ink:transition-default-animation ink:opacity-100 ink:starting:opacity-0"
+          )}
+        >
+          {mobileNavigation &&
+            mobileNavigation({
+              closeMobileNavigation: () => setIsMobileNavOpen(false),
+            })}
+        </div>
+      )}
+    </>
   );
 };

src/layout/InkLayout/InkLayoutSideNav.tsx

@@ -10,7 +10,7 @@ export const InkLayoutSideNav: React.FC<InkLayoutSideNavProps> = ({
 }) => {
   return (
     <nav className="ink:min-h-screen">
-      <div className="ink:flex ink:flex-col ink:gap-1">
+      <div className="ink:flex ink:flex-col ink:gap-1 ink:font-default ink:text-text-default">
         {links.map((link) => {
           return <InkNavLink {...link} key={link.href} />;
         })}

src/layout/InkLayout/InkNavLink.tsx

@@ -4,6 +4,7 @@ import { Slot, Slottable } from "../../components/Slot";
 
 export interface InkLayoutLink extends React.ComponentPropsWithoutRef<"a"> {
   children: React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLElement>;
   href: string;
   icon?: React.ReactNode;
   target?: StringWithAutocomplete<"_blank" | "_self">;
@@ -18,6 +19,7 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
   children,
   className = "",
   asChild,
+  onClick,
   ...props
 }) => {
   const Component = asChild ? Slot : "a";
@@ -26,10 +28,11 @@ export const InkNavLink: React.FC<InkNavLinkProps> = ({
     <Component
       href={href}
       className={classNames(
-        "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:transition-default-animation ink:hover:bg-background-container",
+        "ink:flex ink:items-center ink:gap-1.5 ink:px-1.5 ink:py-1.5 ink:text-inherit ink:no-underline ink:rounded-md ink:transition-colors ink:transition-default-animation ink:hover:bg-background-container ink:box-border",
         className
       )}
       draggable={false}
+      onClick={onClick}
       {...props}
     >
       <Slottable child={children}>

src/layout/InkLayout/MobileNav/InkLayoutMobileNav.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  InkLayoutMobileNav,
+  InkLayoutMobileNavProps,
+} from "./InkLayoutMobileNav";
+import { EXAMPLE_LINKS } from "../../ForStories/ExampleLayoutLinks";
+
+const meta: Meta<InkLayoutMobileNavProps> = {
+  decorators: [
+    (Story) => (
+      <>
+        <div className="ink:w-full ink:h-full ink:box-border" />
+        <Story />
+      </>
+    ),
+  ],
+  title: "Layouts/InkLayoutMobileNav",
+  component: InkLayoutMobileNav,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  args: {
+    links: EXAMPLE_LINKS,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};

src/layout/InkLayout/MobileNav/InkLayoutMobileNav.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { InkLayoutLink, InkNavLink } from "../InkNavLink";
+
+export interface InkLayoutMobileNavProps {
+  links: InkLayoutLink[];
+  onLinkClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export const InkLayoutMobileNav: React.FC<InkLayoutMobileNavProps> = ({
+  links,
+  onLinkClick,
+}) => {
+  return (
+    <nav className="ink:h-full ink:w-full ink:p-3 ink:box-border ink:font-default ink:text-text-default">
+      <div className="ink:flex ink:flex-col ink:gap-1">
+        {links.map((link) => {
+          return <InkNavLink {...link} key={link.href} onClick={onLinkClick} />;
+        })}
+      </div>
+    </nav>
+  );
+};

src/layout/InkLayout/MobileNav/index.ts

@@ -0,0 +1 @@
+export * from "./InkLayoutMobileNav";