Introduction

Questa dashboard è fatta in modo modulare, permettendo di avere un preset già pronto con la possibità di modificare velocemente tema, lingue e gestire la navigazione in sezioni link e tab restando una single page application.

Getting Started

Per far funzionare il tutto bisogna installare oltre che alla dashboard anche altri due componenti che gestiscono il cambio lingua e il cambio tema, creati apposta per questa dashboard.

npm install sfida-dashboard   
npm install sfida-change-language-component 
npm install change-theme-component 

Providers

Per prima cosa bisogna inserire nell' index.ts o nella radice del tuo proggetto il dashboard container

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {DashboardContainer} from "sfida-dashboard/cjs"
import { ThemeProvider } from 'change-theme-component/cjs';
import { ChangeLanguageProvider } from 'sfida-change-language-component/cjs';

const darkTheme = {
  header: "#1769aa",
  primary: "#1769aa",
  primaryHover: "#2979bb",
  secondary: "#FF9800",
  background: "#121212", 
  sidebar: "#1f1f1f", 
  sidebar2: "#1f1f1f",
  sidebarHover: "#373737",
  text: "#1f1f1f",
  title: "#FFFFFF",
};


const lightTheme = {
  header: "#1769aa",
  primary: "#1769aa",
  primaryHover: "#2979bb",
  secondary: "#FF9800",
  background: "#FFFFFF", 
  sidebar: "#1f1f1f", 
  sidebar2: "#1f1f1f",
  sidebarHover: "#373737",
  text: "#1f1f1f",
  title: "#FFFFFF",
};

const languageOptions = [
    
  {    
    name: "Italiano",
    code: "IT",
    title: "Lingua",
},
{
    name : "English",
    code: "US",
    title: "Language"

},

]
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
      <ChangeLanguageProvider
          allOptions={languageOptions} 
          selectedOption={languageOptions[0]}
          >
          <ThemeProvider default='dark' lightTheme={lightTheme} darkTheme={darkTheme}>
            <DashboardContainer>
              <App />
            </DashboardContainer>
          </ThemeProvider>
        </ChangeLanguageProvider>
  
  </React.StrictMode>
);

A questi temi possono esssere aggiunti altre voci per poterli riutilizzare come props negli styled component.

export const Container = styled.div`
    width: 200px ;
    background-color: ${props => props.theme.sidebar2};
    color: ${props => props.theme.text};
`;

in languages vanno messe le opzioni di lingua nell'ordine mostrato nell'esempio, possono essere aggiunte o rimosse. Ed in defaultLanguage invece va inserita la lingua di default.

Components

invece in app andremo ad inserire tutti i componenti utili più alcune funzioni per far funzionare il tutto. In sidebarContent andrà inserito un oggetto per ogni lingua dell'applicazione, per maggiori dettagli vedere la documentazione del componente sfida-change-language-component. in questo oeggetto andranno defiiniti i link, le rotte e le tab che verranno passati alla sidebar e all'header. Per evitare malfunzionamenti cercare di tenere la struttura invariata, anche per quanto riguarda la gerarchia delle rotte.

L'hook [contentState, useContentState] serve a settare il conenuto nella lingua selezionata, che grazie all'use effect sarà sempre aggiornato.

In pages andranno messe le pagine della dashboard con la loro rotta corrispondente.

Infine all'interno del componente TemporanyDrawer possono essere inserite altre opzioni dei settings o rimuovere il settaggio lingua e il settaggio tema se non utilizzati.

import { ChangeThemeComponent } from "change-theme-component/cjs";
import { useContext, useEffect, useState } from "react"
import { LanguageContext, SelectLanguage} from 'sfida-change-language-component/cjs';
import { Header, Main, MyListItem, SettingsItem, Sidebar, TemporaryDrawer } from "sfida-dashboard/cjs";

const sidebarContent = [{
  lingua: "IT",  
  title: "Titolo",
  sections: [
      {
          id: 1,  
          title: "Dashboard",
          radice: "section1",
          links: [
              {   
                  id: 1,       
                  title: "Contabilità",
                  icon: <BuildIcon/>,
                  defaultRoute: "section1/link1",
                  tabs:[
                    {
                        title:"Resoconto",
                        path: "section1/link1"
                    },
                    {
                        title:"Prenotazioni",
                        path: "section1/link1/tab2"
                    },
                    {
                        title:"Bilancio",
                        path: "section1/link1/tab3"
                    },
                  ]
              }
          ]
      }
  ]
},
{
  lingua: "US",  
  title: "TITLE",
  sections: [
      {
          id: 1,  
          title: "Dashboard",
          radice: "section1",
          links: [
              {   
                  id: 1,       
                  title: "Contabilità",
                  icon: <BuildIcon/>,
                  defaultRoute: "section1/link1",
                  tabs:[
                    {
                        title:"Resoconto",
                        path: "section1/link1"
                    },
                    {
                        title:"Prenotazioni",
                        path: "section1/link1/tab2"
                    },
                    {
                        title:"Bilancio",
                        path: "section1/link1/tab3"
                    },
                  ]
              }
          ]
      }
  ]
}]

const pages = [
    {
        route: "/",
        element: <div>Home</div>
    },
    {
        route: "section1/link1",
        element: <div>Link1</div>
    },
    {
        route: "section1/link2",
        element: <div>Link2</div>
    },
    {
        route: "section1/link3",
        element: <div>Link3</div>
    }
]




function App() {
  const [contentState, setContentState] = useState(dataContent[0])
  const {getSelectedOption} = useContext(LanguageContext)
  useEffect(() => { 
      const contentFind = dataContent.find((content) => content.lingua === getSelectedOption().code)
      if (contentFind) {
          setContentState(contentFind!)
          
      }
  })

  
return (
    <>
      <Sidebar 
      title={contentState.title} 
      sections={contentState.sections} 
      />

      <Main pages={pages}>
          <Header sections={contentState.sections}>
              <TemporaryDrawer settings={contentState.settings}>
                <MyListItem>
                    <SettingsItem>
                    {contentState.settings.language}
                    </SettingsItem>
                    <SelectLanguage color='primary' />
                </MyListItem>
                <MyListItem>
                    <SettingsItem>
                    {contentState.settings.theme}
                    </SettingsItem>
                    <ChangeThemeComponent default={'dark'} />
                </MyListItem>
              </TemporaryDrawer>         
          </Header>
      </Main>
    </>
);
}

export default App;

In sidebarContent verrano inseriti tutti i link della sidebar con le sezioni, icone e tab, inserendo anche le versioni in altre lingua se presenti. In pages verranno inseriti i contenuti con i loro path da mostrare nel container principale della dashboard. Le funzioni e gli hook sono indispensabili per il corretto funzionamento del cambio lingua.

Quindi per aggiungere pagine basterà creare il componente e inserirlo alla variabile pages.