trepur_components 2.3.3 → 2.3.5

package/archive/NavOld/StickyNav.tsx

@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+
+import Container from '@components/Container';
+import HamburgerIcon from '@components/HamburgerIcon';
+import Image from '@components/Image';
+import NavItem, { type Props as navItemProps } from '@components/NavItem';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  navLinks: navItemProps[];
+  withMobileSideBar?: boolean;
+  withMobileDropdown?: boolean;
+  dropdownNavHeight: string;
+  logo: string;
+  logoDarkTheme: string;
+  mobileLogo: string;
+  mobileLogoDarkTheme: string;
+  logoLink: string;
+  mobileClasses?: string;
+  getNavStatus?: (asSideBar: boolean, open: boolean) => void;
+  variant: 'primary' | 'secondary' | 'tertiary';
+  visible?: boolean;
+  tabindex?: number;
+  withShadow?: boolean;
+}
+
+const StickyNav = ({
+  id,
+  className,
+  navLinks,
+  withMobileSideBar = false,
+  withMobileDropdown = false,
+  dropdownNavHeight,
+  logo,
+  logoDarkTheme,
+  mobileLogo,
+  mobileLogoDarkTheme,
+  logoLink,
+  mobileClasses,
+  getNavStatus,
+  variant = 'primary',
+
+  visible = false,
+  tabindex = 0,
+  withShadow = false,
+}: Props): JSX.Element => {
+  const [showSideNav, setShowSideNav] = useState(false);
+  const [showDropdownNav, setShowDropdownNav] = useState(false);
+
+  const colours = [style[variant]];
+
+  const classList = classNames(
+    {
+      [style.showStickyNav]: visible,
+      [style.stickyNavDropShadow]: withShadow,
+    },
+    className,
+    colours,
+    style.stickyNav,
+    'theme-local',
+  );
+
+  const sideNavClasses = classNames(
+    {
+      [style.sideBarCollapsed]: !showSideNav,
+      [style.sideBarExpanded]: showSideNav,
+    },
+    style.sideNavClassList,
+    colours,
+  );
+
+  const dropdownNavClasses = classNames(
+    {
+      [style.dropDownCollapsed]: !showDropdownNav,
+      [`h-${dropdownNavHeight}`]: showDropdownNav,
+    },
+    style.dropDownNavClassList,
+  );
+
+  const mobileContainer = classNames(style.mobileContainer, mobileClasses);
+
+  const toggleMenu = (): void => {
+    getNavStatus?.(withMobileSideBar, !showSideNav);
+    if (withMobileSideBar) {
+      setShowSideNav(!showSideNav);
+    } else {
+      setShowDropdownNav(!showDropdownNav);
+    }
+  };
+
+  const themeString: string = 'theme-local';
+  return (
+    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
+      {/* Mobile Nav */}
+      <Container withPadding className={mobileContainer}>
+        <div className={style.collapseBtnWrapper}>
+          <HamburgerIcon onClick={toggleMenu} variant={variant} />
+        </div>
+        <a className={style.mobileLogo} href={logoLink} tabIndex={tabindex}>
+          <Image
+            src={mobileLogo}
+            // title={`${theme.split('-')[1]}-sticky-mobile-logo`}
+            // altText={`${theme.split('-')[1]}-sticky-mobile-logo`}
+            height={5}
+            width={5}
+          />
+        </a>
+      </Container>
+
+      {/* Desktop Nav */}
+      <Container withPadding className={style.desktopNav}>
+        <div className={style.logoClassList}>
+          <a className={style.desktopLogo} href={logoLink} tabIndex={tabindex}>
+            <Image
+              src={logo}
+              title={`${themeString?.split('-')[1] ?? 'a'}-sticky-desktop-logo`}
+              altText={`${
+                themeString?.split('-')[1] ?? 'a'
+              }-sticky-desktop-logo`}
+              height={5}
+              width={5}
+            />
+          </a>
+        </div>
+        <nav className={style.navItems}>
+          {navLinks?.map((navLink, i) => {
+            return (
+              <NavItem
+                key={`desktop_nav_item_${i}`}
+                {...navLink}
+                className={style.navItemPadding}
+                bordered={false}
+                rounded={false}
+                underlineOnHover
+                variant={variant}
+                tabindex={tabindex}
+              />
+            );
+          })}
+        </nav>
+      </Container>
+
+      {/* Mobile Links */}
+      {/* Side Bar */}
+      {withMobileSideBar && (
+        <div className={sideNavClasses}>
+          {navLinks?.map((navLink, i) => {
+            return (
+              <NavItem
+                key={`sidebar_nav_item_${i}`}
+                {...navLink}
+                className={classNames(colours, style.mobileSideBarMenuNavItems)}
+                bordered={false}
+                rounded={false}
+                underlineOnHover
+                variant={variant}
+                tabindex={tabindex}
+              />
+            );
+          })}
+        </div>
+      )}
+      {withMobileDropdown && (
+        <div className={dropdownNavClasses}>
+          <div className={style.mobileDropDownMenu}>
+            {navLinks?.map((navLink, i) => {
+              return (
+                <NavItem
+                  key={`dropdown_nav_item_${i}`}
+                  {...navLink}
+                  className={style.mobileDropDownMenuNavItems}
+                  bordered={false}
+                  rounded={false}
+                  underlineOnHover
+                  variant={variant}
+                  tabindex={tabindex}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StickyNav;

package/archive/NavOld/index.tsx

@@ -0,0 +1,273 @@
+import React, { useEffect, useState } from 'react';
+
+import Container from '@components/Container';
+import HamburgerIcon from '@components/HamburgerIcon';
+import HorizontalLine from '@components/HorizontalLine';
+import Image from '@components/Image';
+import MenuButton, {
+  type Props as MenuButtonProps,
+} from '@components/MenuButton';
+import NavItem, { type Props as navItemProps } from '@components/NavItem';
+import classNames from 'classnames';
+
+import StickyNav from './StickyNav';
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  navLinks: navItemProps[];
+  withMobileSideBar?: boolean;
+  withMobileDropdown?: boolean;
+  dropdownNavHeight: string;
+  logo: string;
+  logoDarkTheme: string;
+  mobileLogo: string;
+  mobileLogoDarkTheme: string;
+  logoLink: string;
+  mobileClasses?: string;
+  getNavStatus?: (withMobileSideBar: boolean, open: boolean) => void;
+  variant: 'primary' | 'secondary' | 'tertiary';
+  text?: string;
+  textLink?: string;
+  stickyNavVariant: 'primary' | 'secondary' | 'tertiary';
+  withStickyNavShadow?: boolean;
+  withDesktopShadow?: boolean;
+  profileMenu?: MenuButtonProps;
+}
+
+const NavOld = ({
+  id,
+  className,
+  navLinks,
+  withMobileSideBar = false,
+  withMobileDropdown = false,
+  dropdownNavHeight,
+  logo,
+  logoDarkTheme,
+  mobileLogo,
+  mobileLogoDarkTheme,
+  logoLink,
+  mobileClasses,
+  getNavStatus,
+  variant = 'primary',
+  stickyNavVariant = 'primary',
+  text,
+  textLink = '/',
+  withStickyNavShadow = false,
+  withDesktopShadow = false,
+  profileMenu,
+}: Props): JSX.Element => {
+  const [showSideNav, setShowSideNav] = useState(false);
+  const [showDropdownNav, setShowDropdownNav] = useState(false);
+  const [showStickyNav, setShowStickyNav] = useState(false);
+  const [navOpen, setNavOpen] = useState(false);
+  const colours = [style[variant]];
+  const classList = classNames(
+    {
+      // [style.desktopNavDropShadow]: withDesktopShadow && !showStickyNav && !showSideNav
+    },
+    className,
+    style.nav,
+    'theme-local',
+    colours,
+  );
+
+  const stickyClassList = classNames(
+    {
+      [style.showStickyNav]: showStickyNav,
+    },
+    style.stickyNav,
+  );
+
+  const isSticky = (): void => {
+    window.scrollY >= 80 ? setShowStickyNav(true) : setShowStickyNav(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', isSticky);
+    return () => {
+      window.removeEventListener('scroll', isSticky);
+    };
+  });
+
+  const sideNavClasses = classNames(
+    {
+      [style.sideBarCollapsed]: !showSideNav,
+      [style.sideBarExpanded]: showSideNav,
+    },
+    style.sideNavClassList,
+    colours,
+  );
+
+  const dropdownNavClasses = classNames(
+    {
+      [style.dropDownCollapsed]: !showDropdownNav,
+      [style.dropDownExpanded]: showDropdownNav,
+      [`h-${dropdownNavHeight}`]: showDropdownNav,
+    },
+    style.dropDownNavClassList,
+  );
+
+  const mobileContainer = classNames(
+    style.mobileContainer,
+    style.mobileNav,
+    mobileClasses,
+  );
+
+  const toggleMenu = (): void => {
+    setNavOpen(!navOpen);
+    if (withMobileSideBar) {
+      getNavStatus?.(withMobileSideBar, !showSideNav);
+      setShowSideNav(!showSideNav);
+    }
+    if (withMobileDropdown) {
+      getNavStatus?.(withMobileDropdown, !showDropdownNav);
+      setShowDropdownNav(!showDropdownNav);
+    }
+  };
+
+  return (
+    <div className={style.wrapperClasses}>
+      <div
+        className={classNames(
+          style.defaultNavClasses,
+          [navOpen] && style.navOpen,
+          [!navOpen] && style.navClosed,
+        )}
+      />
+      <header id={id} className={classList}>
+        {/* Mobile Nav */}
+        <Container withPadding className={mobileContainer}>
+          {(withMobileSideBar || withMobileDropdown) && (
+            <div className={style.collapseBtnWrapper}>
+              <HamburgerIcon onClick={toggleMenu} variant={variant} />
+            </div>
+          )}
+          <a
+            className={style.mobileLogo}
+            href={logoLink}
+            aria-label="mobile-logo"
+          >
+            <Image src={mobileLogo} height={5} width={5} />
+          </a>
+        </Container>
+
+        {/* Desktop Nav */}
+        <Container withPadding className={style.desktopNav}>
+          <div className={style.logoClassList}>
+            <a
+              className={style.desktopLogo}
+              href={logoLink}
+              aria-label="desktop-logo"
+            >
+              <Image src={logo} height={5} width={5} />
+            </a>
+          </div>
+          <nav className={style.navItems}>
+            {navLinks?.map((navLink, i) => {
+              return (
+                <NavItem
+                  key={`desktop_nav_item_${i}`}
+                  {...navLink}
+                  className={style.navItemPadding}
+                  bordered={false}
+                  rounded={false}
+                  underlineOnHover
+                  variant={variant}
+                />
+              );
+            })}
+          </nav>
+          {!profileMenu?.menuItems !== undefined && (
+            <div className={style.textClassList}>
+              {text !== undefined && (
+                <NavItem
+                  title={text}
+                  href={textLink}
+                  className={style.navItemPadding}
+                  underlineOnHover
+                  variant={variant}
+                />
+              )}
+            </div>
+          )}
+          {profileMenu?.menuItems && (
+            <div className={style.profileClassList}>
+              <MenuButton {...profileMenu} menuItems={profileMenu?.menuItems} />
+            </div>
+          )}
+        </Container>
+
+        {/* Mobile Links */}
+        {/* Side Bar */}
+        {withMobileSideBar && (
+          <div className={sideNavClasses}>
+            {navLinks?.map((navLink, i) => {
+              return (
+                <div className="flex-col" key={`sidebar_nav_item_${i}`}>
+                  <NavItem
+                    {...navLink}
+                    className={classNames(
+                      colours,
+                      style.mobileSideBarMenuNavItems,
+                      'justify-center pb-4 pt-2',
+                    )}
+                    bordered={false}
+                    rounded={false}
+                    underlineOnHover
+                    variant={variant}
+                  />
+
+                  <HorizontalLine
+                    colour={variant === 'secondary' ? 'primary' : 'secondary'}
+                    className="mx-2"
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        {withMobileDropdown && (
+          <div className={dropdownNavClasses}>
+            <div className={style.mobileDropDownMenu}>
+              {navLinks?.map((navLink, i) => {
+                return (
+                  <NavItem
+                    key={`dropdown_nav_item_${i}`}
+                    {...navLink}
+                    className={style.mobileDropDownMenuNavItems}
+                    bordered={false}
+                    rounded={false}
+                    underlineOnHover
+                    variant={variant}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+        <StickyNav
+          id={id}
+          className={stickyClassList}
+          navLinks={navLinks}
+          withMobileSideBar={withMobileSideBar}
+          withMobileDropdown={withMobileDropdown}
+          dropdownNavHeight={dropdownNavHeight}
+          logo={logo}
+          logoDarkTheme={logoDarkTheme}
+          mobileLogo={mobileLogo}
+          mobileLogoDarkTheme={mobileLogoDarkTheme}
+          logoLink={logoLink}
+          mobileClasses={mobileClasses}
+          {...(getNavStatus && { getNavStatus })}
+          variant={stickyNavVariant}
+          tabindex={showStickyNav ? 0 : -1}
+          withShadow={withStickyNavShadow}
+        />
+      </header>
+    </div>
+  );
+};
+
+export default NavOld;

package/archive/NavOld/style.module.css

@@ -0,0 +1,156 @@
+.wrapperCalsses {
+  @apply flex min-h-screen flex-col;
+}
+
+.defaultNavClasses {
+  @apply fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700;
+}
+
+.navOpen {
+  @apply visible opacity-100;
+}
+
+.navClosed {
+  @apply invisible opacity-0;
+}
+
+.desktopNav {
+  @apply relative z-50;
+  @apply flex items-center justify-between;
+}
+
+.desktopNavDropShadow {
+  @apply drop-shadow-lg;
+}
+
+.mobileNav {
+  @apply relative z-50;
+}
+
+.stickyNav {
+  @apply fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500;
+}
+
+.stickyNavDropShadow {
+  @apply drop-shadow-lg;
+}
+
+.showStickyNav {
+  @apply opacity-100 transition-all duration-1000;
+}
+
+.invisible {
+  @apply hidden;
+}
+
+.primary {
+  @apply bg-primary text-secondary;
+}
+
+.secondary {
+  @apply bg-secondary text-primary;
+}
+
+.tertiary {
+  @apply bg-tertiary text-secondary;
+}
+
+.white {
+  @apply bg-white text-black;
+}
+
+.black {
+  @apply bg-black text-white;
+}
+
+.collapseBtnWrapper {
+  @apply absolute inset-y-0 left-8 top-4;
+}
+
+.collapseBtnWrapper:hover > button {
+  @apply text-primary;
+}
+
+.navItems {
+  @apply hidden w-96 justify-center py-6 md:flex md:pr-16 lg:pr-0;
+}
+
+.navItemPadding {
+  @apply mx-auto w-24 text-center;
+}
+
+.logoClassList {
+  @apply my-2 hidden w-96 md:flex;
+}
+
+.textClassList {
+  @apply hidden w-96 flex-row-reverse lg:flex;
+}
+
+.profileClassList {
+  @apply hidden w-96 flex-row-reverse md:flex;
+}
+
+.desktopLogo:focus {
+  @apply border-2 border-white;
+}
+
+.mobileLogo {
+  @apply mx-auto my-2;
+}
+
+.mobileLogo:focus {
+  @apply border-2 border-white;
+}
+
+.mobileContainer {
+  @apply flex items-center md:hidden;
+}
+
+.mobileDropDownMenu {
+  @apply space-y-1 pb-3 pt-2;
+}
+
+.dropDownNavClassList {
+  @apply z-50 overflow-hidden md:hidden;
+}
+
+.mobileDropDownMenuNavItems {
+  @apply pl-8 pt-2;
+}
+
+.dropDownCollapsed {
+  @apply h-0;
+}
+
+.sideNavClassList {
+  @apply fixed z-50 h-full overflow-hidden duration-700 md:hidden;
+}
+
+.mobileSideBarMenu {
+  @apply space-y-1 pb-3 pt-2;
+}
+
+.mobileSideBarMenuNavItems {
+  @apply pl-2 pt-4;
+}
+
+.mobileSideBarMenuNavItems:focus {
+  @apply border-2 border-white;
+}
+
+.sideBarCollapsed {
+  @apply w-0;
+}
+
+.sideBarExpanded {
+  @apply h-screen w-full sm:w-1/3;
+}
+
+.dark {
+  @apply bg-primary text-white;
+}
+
+.light {
+  @apply bg-white text-primary;
+}

package/archive/NavTwo/Dropdown.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children: any;
+  visible?: boolean;
+}
+
+export const Dropdown = ({
+  id,
+  className,
+  children,
+  visible = false,
+}: Props): JSX.Element => {
+  const dropdownNavClasses = classNames(
+    {
+      [style.dropDownCollapsed]: !visible,
+      [style.dropDownExpanded]: visible,
+      [`h-auto`]: visible,
+    },
+    style.dropDownNavClassList,
+    className,
+  );
+
+  return (
+    <div id={id} className={dropdownNavClasses}>
+      <div className={style.mobileDropDownMenu}>{children}</div>
+    </div>
+  );
+};

package/archive/NavTwo/Nav.stories.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Nav from '.';
+import Container from '../Container';
+import HamburgerIcon from '../HamburgerIcon';
+import Image from '../Image';
+import NavItem from '../NavItem';
+
+const meta = {
+  title: 'Components/NavTwo',
+  component: Nav,
+  parameters: {
+    backgrounds: {
+      default: 'grey',
+      values: [
+        {
+          name: 'grey',
+          value: '#f3f3f3',
+        },
+      ],
+    },
+  },
+  argTypes: {
+    ...idAndClassName,
+    children: {},
+  },
+  args: {
+    className: 'bg-primary text-white py-4',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};