%PDF-
%PDF-
Mini Shell
Mini Shell
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[181],{2547:function(e,n,t){"use strict";t.r(n);var a=t(118),i=t(52),c=t(1098),o=t(194),s=t(55),r=t(6),l=t(111),d=t(1);n.default=function(e){const n=Object(r.b)();return Object(d.jsxs)(d.Fragment,{children:[Object(d.jsx)(o.a,{variant:"h4",className:"mb-24",children:"FuseNavigation"}),Object(d.jsxs)(o.a,{className:"mb-16",component:"p",children:[Object(d.jsx)("code",{children:"FuseNavigation"})," is a custom-built Fuse component that allows you to create a multi-level collapsable navigation."]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"[navigation]"}),Object(d.jsxs)(o.a,{className:"mb-16",component:"p",children:[Object(d.jsx)("code",{children:"FuseNavigation"})," uses an array to populate the entire navigation. It supports four different navigation items; Group, Collapse, Item. and Divider. These items can be mixed and matched to create unique and complex navigation layouts."]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"[layout]"}),Object(d.jsx)(o.a,{className:"mb-16",component:"p",children:'"vertical" or "horizontal" layout options.'}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"[active]"}),Object(d.jsxs)(o.a,{className:"mb-16",component:"p",children:["You can set ",Object(d.jsx)("b",{children:"active"}),' to "square" to use square active item style instead of rounded/circle for ',Object(d.jsx)("b",{children:"vertical layout"}),"."]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"[dense]"}),Object(d.jsxs)(o.a,{className:"mb-16",component:"p",children:["You can use ",Object(d.jsx)("b",{children:"dense={true}"})," to set dense variation of the navigation."]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h5",children:"Usage"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx",children:'\n <FuseNavigation navigation={navigation} layout="vertical" active="square" dense={true}/>\n '}),Object(d.jsx)(o.a,{className:"mt-48 mb-8",variant:"h4",children:"Navigation item types"}),Object(d.jsx)(o.a,{className:"mt-32 p-8 rounded-4 bg-yellow-100 border-1 border-yellow-700 text-black mb-8",children:"It is mandatory to give a unique id to all of your navigation items."}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"Group"}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'applications',\n 'title' : 'Applications',\n 'type' : 'group',\n 'icon' : 'apps',\n 'url' : '/apps/calendar' //optional\n 'children' : [\n {\n 'id' : 'calendar',\n 'title' : 'Calendar',\n 'type' : 'item',\n 'icon' : 'today',\n 'url' : '/apps/calendar'\n }\n ]\n }\n "}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"Collapse"}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'dashboards',\n 'title' : 'Dashboards',\n 'type' : 'collapse',\n 'icon' : 'dashboard',\n 'url' : '/apps/dashboards/project' //optional\n 'children' : [\n {\n 'id' : 'project',\n 'title': 'Project',\n 'type' : 'item',\n 'url' : '/apps/dashboards/project'\n }\n ]\n }\n "}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'project',\n 'title': 'Project',\n 'type' : 'item',\n 'url' : '/apps/dashboards/project'\n }\n "}),Object(d.jsx)(o.a,{className:"text-20 mt-24 mb-8 font-medium",component:"h2",children:"exact: bool"}),Object(d.jsx)(o.a,{className:"text-16 mb-8",component:"h2",children:"When true, the active class/style will only be applied if the location is matched exactly."}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'project',\n 'title': 'Project',\n 'type' : 'item',\n 'url' : '/apps/dashboards/project',\n 'exact': true\n }\n "}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"Link"}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'test-link',\n 'title' : 'Test Link',\n 'type' : 'link',\n 'icon' : 'link',\n 'url' : 'http://fusetheme.com',\n 'target': '_blank'\n },\n "}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"Divider"}),Object(d.jsx)(a.a,{component:"pre",className:"language-json",children:"\n {\n 'id' : 'project',\n 'title': 'Project',\n 'type' : 'item',\n 'url' : '/apps/dashboards/project'\n }\n {\n 'type': 'divider\n },\n {\n 'id' : 'project',\n 'title': 'Project',\n 'type' : 'item',\n 'url' : '/apps/dashboards/project'\n }\n "}),Object(d.jsx)(o.a,{className:"mt-48 mb-8",variant:"h4",children:"Actions"}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"setNavigation"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use ",Object(d.jsxs)("code",{children:["setNavigation(navigation","<Array>",")"]})," action to set/change whole navigation."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:"With the button below, whole navigation is changed."}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.h)([{id:"auth",title:"Auth",type:"group",icon:"apps",children:[{id:"login",title:"Login",type:"item",url:"/login",auth:s.b.onlyGuest,icon:"lock"},{id:"register",title:"Register",type:"item",url:"/register",auth:s.b.onlyGuest,icon:"person_add"}]}]))},variant:"contained",color:"primary",children:"Set Navigation"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(setNavigation([\n {\n 'id' : 'auth',\n 'title' : 'Auth',\n 'type' : 'group',\n 'icon' : 'apps',\n 'children': [\n {\n 'id' : 'login',\n 'title': 'Login',\n 'type' : 'item',\n 'url' : '/login',\n auth : authRoles.onlyGuest,\n 'icon' : 'lock'\n },\n {\n 'id' : 'register',\n 'title': 'Register',\n 'type' : 'item',\n 'url' : '/register',\n auth : authRoles.onlyGuest,\n 'icon' : 'person_add'\n },\n ]\n }\n ]));\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Set Navigation\n </Button>\n "})]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"resetNavigation"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use ",Object(d.jsx)("code",{children:"resetNavigation()"})," action to reset navigation to initial state."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:"With the button below, navigation is returned to config defaults."}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.e)())},variant:"contained",color:"primary",children:"Reset Navigation"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:'\n <Button\n onClick={()=> {\n dispatch(resetNavigation());\n }}\n variant="contained"\n color="primary"\n >\n Reset Navigation\n </Button>\n '})]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"updateNavigationItem"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use",Object(d.jsxs)("code",{children:["updateNavigationItem(id, ",Object(d.jsx)("i",{children:"object"}),")"]}),"action to update a navigation item."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:"With the button below, 'dashboards' title changes, and a badge is added."}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.i)("dashboards",{title:"All Dashboards",badge:{title:2,bg:"rgb(3, 155, 228)",fg:"#FFFFFF"}}))},variant:"contained",color:"primary",children:"Update Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(updateNavigationItem('dashboards',\n {\n 'title': 'All Dashboards',\n 'badge': {\n 'title': 2,\n 'bg' : 'rgb(3, 155, 228)',\n 'fg' : '#FFFFFF'\n }\n }\n ))\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Update Navigation Item\n </Button>\n "})]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"removeNavigationItem"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use ",Object(d.jsx)("code",{children:"removeNavigationItem(id)"})," action to remove a navigation item."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:'With the button below, "Calendar" navigation item is removed.'}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.d)("calendar"))},variant:"contained",color:"primary",children:"Remove Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:'\n <Button\n onClick={()=> {\n dispatch(removeNavigationItem(\'calendar\'))\n }}\n variant="contained"\n color="primary"\n >\n Remove Navigation Item\n </Button>\n '})]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"prependNavigationItem"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use",Object(d.jsxs)("code",{children:["prependNavigationItem(",Object(d.jsx)("i",{children:"object"}),", ",Object(d.jsx)("i",{children:"collapseId/groupId"}),"?)"]}),"action to prepend a navigation item into the navigation array."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:'With the button below, "fusetheme.com" navigation item is added at the top of the navigation array.'}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.c)({id:"test-link-".concat(i.a.generateGUID()),title:"fusetheme.com",type:"link",icon:"link",url:"http://fusetheme.com",target:"_blank"}))},variant:"contained",color:"primary",children:"Prepend Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(prependNavigationItem(\n {\n 'id' : 'test-link',\n 'title' : 'fusetheme.com',\n 'type' : 'link',\n 'icon' : 'link',\n 'url' : 'http://fusetheme.com',\n 'target': '_blank'\n }\n ))\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Prepend Navigation Item\n </Button>\n "})]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:'With the button below, "fusetheme.com" navigation item is added into the top of the "Dashboards" children.'}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.c)({id:"test-link-".concat(i.a.generateGUID()),title:"fusetheme.com",type:"link",icon:"link",url:"http://fusetheme.com",target:"_blank"},"dashboards"))},variant:"contained",color:"primary",children:"Prepend Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(prependNavigationItem(\n {\n 'id' : 'test-link',\n 'title' : 'fusetheme.com',\n 'type' : 'link',\n 'icon' : 'link',\n 'url' : 'http://fusetheme.com',\n 'target': '_blank'\n }, 'dashboards'\n ))\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Prepend Navigation Item\n </Button>\n "})]}),Object(d.jsx)(o.a,{className:"mt-32 mb-8",variant:"h6",children:"appendNavigationItem"}),Object(d.jsxs)(o.a,{className:"text-16 mb-8",component:"h2",children:["Use",Object(d.jsxs)("code",{children:["appendNavigationItem(",Object(d.jsx)("i",{children:"object"}),", ",Object(d.jsx)("i",{children:"collapseId/groupId"}),"?)"]}),"action to append a navigation item into the navigation array."]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:'With the button below, "fusetheme.com" navigation item is added at the bottom of the array.'}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.a)({id:"test-link-".concat(i.a.generateGUID()),title:"fusetheme.com",type:"link",icon:"link",url:"http://fusetheme.com",target:"_blank"}))},variant:"contained",color:"primary",children:"Append Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(appendNavigationItem(\n {\n 'id' : 'test-link',\n 'title' : 'fusetheme.com',\n 'type' : 'link',\n 'icon' : 'link',\n 'url' : 'http://fusetheme.com',\n 'target': '_blank'\n }\n ))\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Append Navigation Item\n </Button>\n "})]}),Object(d.jsxs)("div",{className:"border-1 rounded-16 p-16 my-16",children:[Object(d.jsx)(o.a,{className:"text-16 mb-24",component:"h2",children:'With the button below, "fusetheme.com" navigation item is added into the bottom of the "Dashboards" children.'}),Object(d.jsx)(c.a,{onClick:()=>{n(Object(l.a)({id:"test-link-".concat(i.a.generateGUID()),title:"fusetheme.com",type:"link",icon:"link",url:"http://fusetheme.com",target:"_blank"},"dashboards"))},variant:"contained",color:"primary",children:"Append Navigation Item"}),Object(d.jsx)(a.a,{component:"pre",className:"language-jsx mt-24",children:"\n <Button\n onClick={()=> {\n dispatch(appendNavigationItem(\n {\n 'id' : 'test-link',\n 'title' : 'fusetheme.com',\n 'type' : 'link',\n 'icon' : 'link',\n 'url' : 'http://fusetheme.com',\n 'target': '_blank'\n }, 'dashboards'\n ))\n }}\n variant=\"contained\"\n color=\"primary\"\n >\n Append Navigation Item\n </Button>\n "})]})]})}}}]);
Zerion Mini Shell 1.0