77 lines
2.6 KiB
JSON
77 lines
2.6 KiB
JSON
{
|
|
"name": "NavbarStyleFullscreen",
|
|
"description": "Fullscreen overlay navigation with animated menu reveal and staggered link animations.",
|
|
"details": "Use for immersive, design-focused websites where the navigation takes over the entire screen. Features a hamburger button that transforms into an X, clip-path reveal animation for the menu panel, staggered link entrance animations, and a hover effect that dims sibling links. Supports Lenis smooth scrolling.",
|
|
"constraints": {
|
|
"minLinks": 3,
|
|
"maxLinks": 5,
|
|
"preferredCount": 5,
|
|
"brandRules": {
|
|
"required": false,
|
|
"minChars": 2,
|
|
"maxChars": 20,
|
|
"example": "Webild",
|
|
"fallbackBehavior": "Shows brandName text"
|
|
},
|
|
"linkRules": {
|
|
"name": {
|
|
"required": true,
|
|
"minChars": 2,
|
|
"maxChars": 15,
|
|
"example": "About"
|
|
},
|
|
"id": {
|
|
"required": true,
|
|
"format": "section-id | url",
|
|
"examples": [
|
|
"about",
|
|
"services",
|
|
"https://github.com",
|
|
"www.example.com"
|
|
],
|
|
"behavior": "Internal IDs scroll to section, URLs open in new tab"
|
|
}
|
|
},
|
|
"bottomTextRules": {
|
|
"bottomLeftText": {
|
|
"required": false,
|
|
"minChars": 2,
|
|
"maxChars": 30,
|
|
"example": "Global Community"
|
|
},
|
|
"bottomRightText": {
|
|
"required": false,
|
|
"minChars": 2,
|
|
"maxChars": 30,
|
|
"example": "hello@example.com"
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"navItems": "Array<{name: string, id: string}>",
|
|
"logoSrc?": "string",
|
|
"logoAlt?": "string",
|
|
"brandName?": "string (default: 'Webild')",
|
|
"bottomLeftText?": "string (default: 'Global Community')",
|
|
"bottomRightText?": "string (default: 'hello@example.com')",
|
|
"topBarClassName?": "string (default: '')",
|
|
"button?": "{text: string, onClick?: () => void, href?: string}",
|
|
"buttonClassName?": "string (default: '')",
|
|
"buttonTextClassName?": "string (default: '')",
|
|
"logoClassName?": "string (default: '')",
|
|
"logoImageClassName?": "string (default: '')"
|
|
},
|
|
"usageExample": "<NavbarStyleFullscreen navItems={[{name: 'Home', id: 'home'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'services'}, {name: 'Blog', id: 'blog'}, {name: 'Contact', id: 'contact'}]} bottomLeftText=\"Global Community\" bottomRightText=\"hello@example.com\" />",
|
|
"do": [
|
|
"Use for feature showcases",
|
|
"Use for capability displays",
|
|
"Requires navItems[]"
|
|
],
|
|
"dont": [],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|