diff --git a/src/content/structured/components/side-nav/code.mdx b/src/content/structured/components/side-nav/code.mdx index 1b98feca7..bd5cca3ad 100644 --- a/src/content/structured/components/side-nav/code.mdx +++ b/src/content/structured/components/side-nav/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/side-navigation/code" -date: "2024-05-31" +date: "2024-06-07" title: "Side navigation" @@ -1170,3 +1170,7 @@ return ( + +## Layout example + +For full screen examples, see [side navigation patterns](/patterns/navigation-patterns/side-navigation-layout). diff --git a/src/content/structured/components/top-nav/code.mdx b/src/content/structured/components/top-nav/code.mdx index 596b37026..3e85dd779 100644 --- a/src/content/structured/components/top-nav/code.mdx +++ b/src/content/structured/components/top-nav/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/top-navigation/code" -date: "2024-05-31" +date: "2024-06-07" title: "Top navigation" @@ -1391,3 +1391,7 @@ return ( + +## Layout example + +For full screen examples, see [top navigation patterns](/patterns/navigation-patterns/top-navigation-layout). diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json index cb61edd75..d5e30acbe 100644 --- a/src/icds-pages-data.json +++ b/src/icds-pages-data.json @@ -3289,9 +3289,9 @@ }, { "id": "components__side-nav__codex", - "contents": "\nimport {\n IcSideNavigation,\n IcNavigationItem,\n IcNavigationGroup,\n IcDivider,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nimport {\n mdiHome,\n mdiCoffeeOutline,\n mdiMagnify,\n mdiCoffeeMakerOutline,\n mdiCogOutline,\n mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n## Side navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Expanded by default\n\nexport const snippetsExpanded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in ``.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n ACME coffee shop\n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n \n This is the Home page

} />\n Search

} />\n Drinks

} />\n Coffee Maker

} />\n Settings

} />\n \n \n
\n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n \n ACME coffee shop\n \n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n\n", + "contents": "\nimport {\n IcSideNavigation,\n IcNavigationItem,\n IcNavigationGroup,\n IcDivider,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nimport {\n mdiHome,\n mdiCoffeeOutline,\n mdiMagnify,\n mdiCoffeeMakerOutline,\n mdiCogOutline,\n mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n## Side navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Expanded by default\n\nexport const snippetsExpanded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in ``.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n ACME coffee shop\n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n \n This is the Home page

} />\n Search

} />\n Drinks

} />\n Coffee Maker

} />\n Settings

} />\n \n \n
\n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n \n ACME coffee shop\n \n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n\n\n## Layout example\n\nFor full screen examples, see [side navigation patterns](/patterns/navigation-patterns/side-navigation-layout).\n", "path": "/components/side-navigation/code", - "date": "2024-05-31", + "date": "2024-06-07", "title": "Side navigation", "status": "BETA", "subTitle": "Side navigation provides an app's main navigation and is fixed on the left-hand side of the app. It includes the app's name, main navigation and optional secondary links.", @@ -3312,10 +3312,10 @@ ], "meta": { "relativePath": "components/side-nav/code.mdx", - "createdAt": "2024-06-13T15:48:27.279Z", - "lastModified": "2024-06-13T15:48:27.279Z", - "size": 68559, - "formattedSize": "67.0 KB" + "createdAt": "2024-06-13T15:52:12.734Z", + "lastModified": "2024-06-13T15:52:12.734Z", + "size": 68691, + "formattedSize": "67.1 KB" } }, { @@ -4229,9 +4229,9 @@ }, { "id": "components__top-nav__codex", - "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationButton,\n IcNavigationItem,\n IcNavigationGroup,\n SlottedSVG,\n IcBadge,\n IcButton,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n## Top navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Navigation button details\n\n\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n alert('test')}\n >\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n alert('test')}\n >\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Conditional tabs\n\nexport const ConditionalTabsExample = () => {\n const [showTabs, setShowTabs] = useState(false);\n return (\n <>\n \n \n \n \n \n \n \n \n {showTabs && (\n <>\n \n \n \n )}\n \n setShowTabs(!showTabs)}>Show/Hide tabs\n \n );\n};\n\nexport const conditionalTabs = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n {showNavItems && (\n <>\n \n \n \n )}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With React Router (using slots)\n\nThe following examples also demonstrate using a slotted link for app title, short app title and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n
\n \n \n This is the get started page\n }\n />\n This page is about accessibility\n }\n />\n \n \n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n \n\n", + "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationButton,\n IcNavigationItem,\n IcNavigationGroup,\n SlottedSVG,\n IcBadge,\n IcButton,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n## Top navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Navigation button details\n\n\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n alert('test')}\n >\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n alert('test')}\n >\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Conditional tabs\n\nexport const ConditionalTabsExample = () => {\n const [showTabs, setShowTabs] = useState(false);\n return (\n <>\n \n \n \n \n \n \n \n \n {showTabs && (\n <>\n \n \n \n )}\n \n setShowTabs(!showTabs)}>Show/Hide tabs\n \n );\n};\n\nexport const conditionalTabs = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n {showNavItems && (\n <>\n \n \n \n )}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With React Router (using slots)\n\nThe following examples also demonstrate using a slotted link for app title, short app title and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n
\n \n \n This is the get started page\n }\n />\n This page is about accessibility\n }\n />\n \n \n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n \n\n\n## Layout example\n\nFor full screen examples, see [top navigation patterns](/patterns/navigation-patterns/top-navigation-layout).\n", "path": "/components/top-navigation/code", - "date": "2024-05-31", + "date": "2024-06-07", "title": "Top navigation", "status": "BETA", "subTitle": "Top navigation sits across the top of the page. It includes the app name, search bar, main navigation and secondary links.", @@ -4252,10 +4252,10 @@ ], "meta": { "relativePath": "components/top-nav/code.mdx", - "createdAt": "2024-06-13T15:45:35.643Z", - "lastModified": "2024-06-13T15:45:35.643Z", - "size": 41006, - "formattedSize": "40.0 KB" + "createdAt": "2024-06-13T15:52:38.028Z", + "lastModified": "2024-06-13T15:52:38.028Z", + "size": 41136, + "formattedSize": "40.2 KB" } }, {