Current Version

Next v13, React v18 with PrimeReact v9

Getting Started

Sakai is an application template for React based on the popular NextJS framework. To get started, clone the repository from GitHub and install the dependencies with npm or yarn.

"npm install" or "yarn"

Next step is running the application using the start script and navigate to http://localhost:3000/ to view the application. That is it, you may now start with the development of your application using the Sakai template.

"npm run dev" or "yarn dev"

Dependencies

Dependencies of Sakai are listed below and needs to be defined at package.json.

"primereact": "^9.2.2",                    //required: PrimeReact components
"primeicons": "^6.0.1",                    //required: Icons
"primeflex": "^3.3.0",                     //required: Utility CSS classes

Structure

Sakai consist of a couple of folders where demos and core layout have been separated.

• layout: Main layout files
• demo: Contains demo related utilities and helpers
• pages: Demo pages
• public/demo: Assets used in demos
• public/layout: Assets used in layout such as a logo
• styles/demo: Styles used in demos only
• styles/layout: SCSS files of the core layout

Default Configuration

Initial layout configuration can be defined at the layout/context/layoutcontext.js file, this step is optional and only necessary when customizing the defaults.

import React, { useState } from 'react';
import Head from 'next/head';
export const LayoutContext = React.createContext();

export const LayoutProvider = (props) => {
    const [layoutConfig, setLayoutConfig] = useState({
        ripple: false,                          //toggles ripple on and off
        inputStyle: 'outlined',                 //default style for input elements
        menuMode: 'static',                     //layout mode of the menu, valid values are "static" or "overlay"
        colorScheme: 'light',                   //color scheme of the template, valid values are "light", "dim" and "dark"
        theme: 'lara-light-indigo',             //default component theme for PrimeReact
        scale: 14                               //size of the body font size to scale the whole application
    });
}

Menu

Main menu is defined at AppMenu.js file based on MenuModel API.

Integration with Existing NextJS Applications

Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.

PrimeReact Theme

Sakai theming is based on the PrimeReact theme being used. Default theme is lara-light-indigo.

SASS Variables

In case you'd like to customize the main layout variables, open _variables.scss file under src/layout folder. Saving the changes will be reflected instantly at your browser.

src/layout/_variables.scss

/* General */
$scale:14px;                    /* initial font size */ 
$borderRadius:12px;             /* border radius of layout element e.g. card, sidebar */ 
$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar */