สมัครงาน Online : กองการเจ้าหน้าที่ มหาวิทยาลัยมหาสารคาม

Current Version

Next v13, React v18, Typescript with PrimeReact v10

Getting Started

Sakai is an application template for React based on the popular Next.js framework with new App Router. 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.6.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.

There are two route groups under the app folder; (main) represents the pages that reside in the main dashboard layout whereas (full-page) groups the pages with full page content such as landing page or a login page.

layout/: Main layout files
demo/: Contains demo related utilities and helpers
app/: 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

Route Groups

Root Layout is the main of the application and it is defined at app/layout.tsx file. It contains the style imports and layout context provider.

"use client"
import { LayoutProvider } from "./layout/context/layoutcontext";
import { PrimeReactProvider } from "primereact/api";
import "primereact/resources/primereact.css";
...
import "../styles/layout/layout.scss";
import "../styles/demo/Demos.scss";

interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <link
          id="theme-css"
          href={`/themes/lara-light-indigo/theme.css`}
          rel="stylesheet"
        ></link>
      </head>
      <body>
        <PrimeReactProvider>
            <LayoutProvider>{children}</LayoutProvider>
        </PrimeReactProvider>
      </body>
    </html>
  );
}

The pages that are using the layout elements need to be defined under the app/(main)/ folder. Those pages use the app/(main)/layout.tsx as the root layout.

import { Metadata } from 'next';
import Layout from "../../layout/layout";

interface MainLayoutProps {
  children: React.ReactNode;
}

export const metadata: Metadata = {
    title: "Sakai by PrimeReact | Free Admin Template for Next.js",
    ...
  };

export default function MainLayout({ children }: MainLayoutProps) {
  return <Layout>{children}</Layout>;
}

Only the pages that are using config sidebar wihout layout elements need to be defined under the app/(full-page)/ folder. Those pages use the app/(full-page)/layout.tsx as the root layout.

import { Metadata } from 'next';
import AppConfig from "../../layout/AppConfig";
import React from "react";

interface FullPageLayoutProps {
  children: React.ReactNode;
}

export const metadata: Metadata = {
    title: "Sakai by PrimeReact | Free Admin Template for Next.js",
    ...
  };

export default function FullPageLayout({ children }: FullPageLayoutProps) {
  return (
    <React.Fragment>
      {children}
      <AppConfig minimal />
    </React.Fragment>
  );
}

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.

"use client";
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
    });
}

PrimeReact Theme

Sakai theming is based on the PrimeReact theme being used.

SASS Variables

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

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 */