@latte-macchiat-io/latte-vanilla-components 0.0.214 → 0.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.214",
+  "version": "0.0.216",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/HeaderToggleNav/export.tsx

@@ -0,0 +1 @@
+export { HeaderToggleNav, type HeaderToggleNavProps } from './';

package/src/components/Header/HeaderToggleNav/index.tsx

@@ -0,0 +1,17 @@
+import { clsx } from 'clsx';
+
+import { bar, toggleNavButton } from './styles.css';
+
+export type HeaderToggleNavProps = {
+  isOpen: boolean;
+};
+
+export const HeaderToggleNav = ({ isOpen }: HeaderToggleNavProps) => {
+  return (
+    <span className={toggleNavButton()}>
+      <span className={clsx(bar, isOpen && 'open')} />
+      <span className={clsx(bar, isOpen && 'open')} />
+      <span className={clsx(bar, isOpen && 'open')} />
+    </span>
+  );
+};

package/src/components/Header/HeaderToggleNav/styles.css.ts

@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const toggleNavButton = recipe({
+  base: {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    width: '24px',
+    height: '18px',
+    padding: 0,
+  },
+});
+
+export const bar = style({
+  height: '3px',
+  width: '100%',
+  display: 'block',
+  borderRadius: '2px',
+  backgroundColor: 'black',
+  transition: 'all 0.3s ease',
+
+  selectors: {
+    '&.open:nth-child(1)': {
+      transform: 'translateY(7.5px) rotate(45deg)',
+    },
+    '&.open:nth-child(2)': {
+      opacity: 0,
+    },
+    '&.open:nth-child(3)': {
+      transform: 'translateY(-7.5px) rotate(-45deg)',
+    },
+  },
+});

package/src/components/Header/HeaderToggleNav/theme.ts

@@ -0,0 +1,15 @@
+const themeHeaderToggleNavBase = {
+  headerToggleNav: {},
+};
+
+export const themeHeaderToggleNavLight = {
+  headerToggleNav: {
+    ...themeHeaderToggleNavBase.headerToggleNav,
+  },
+};
+
+export const themeHeaderToggleNavDark = {
+  headerToggleNav: {
+    ...themeHeaderToggleNavBase.headerToggleNav,
+  },
+};

package/src/components/Header/index.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
+import { HeaderToggleNav } from './HeaderToggleNav/export';
 import { headerOverlayRecipe, headerPlaceholder, headerRecipe, headerToggleNav, HeaderToggleNavVariants } from './styles.css';
 
 export type HeaderProps = React.HTMLAttributes<HTMLDivElement> &
@@ -24,7 +25,7 @@ export const Header = ({ children, childrenOverlay, childrenToggleNav, isFixed =
 
         {toggleNavVisibility !== 'hide' && (
           <button onClick={onToggleNav} aria-label="Toggle navigation" className={headerToggleNav({ toggleNavVisibility })}>
-            {childrenToggleNav}
+            {childrenToggleNav || <HeaderToggleNav isOpen={isNavOpen} />}
           </button>
         )}
       </header>