Folder Structure

To enhance code maintainability, we've implemented a well-organized folder structure that groups similar files and components by their functionalities.

ONOMIS-REACT
├── 📂 public
├── 📂 src
|    ├── 📂 @core 
|    ├── 📂 assets
|    ├── 📂 data
|    ├── 📂 hooks 
|    ├── 📂 layouts   
|    ├── 📂 navigation
|    ├── 📂 pages
|    ├── 📂 plugins 
|        ├── 📂 i18next // Localization codes 
|        ├── 📂 Casl 
|        └── 📜 Axios 
|    ├── 📂 routes
|    ├── 📂 store    
|    ├── 📂 styles 
|    └── 📂 views 
├── 📜 App.jsx
├── 📜 main.jsx
├── 📜 app.config.js
├── 📜 package.json
├── 📜 tailwind.config.js
├── 📜 vite.config.js
└── 📜 README.md

@core

This directory Includes all of our core files and components.

core
 ├── 📂 components
 ├── 📂 context
 ├── 📂 hooks
 ├── 📂 scss
 └── 📂 utils // Includes all the utility functions.

WARNING

You are not authorized to update, modify, or change any files within this folder.

layouts

layouts
 ├── 📂 components // Navbar components
 ├── 📂 Default 
 ├── 📜 Blank.jsx 
 └── 📜 Error.jsx

Default

The pages you create will automatically appear in the default layout (src/layouts/Default.jsx), featuring the main content in the center, a side navigation menu, and a horizontal app bar at the top.

This layout is fully responsive, and on mobile devices, the side menu transforms into a collapsible dropdown for easy access.

Header

There are two header types available: standard and sticky.

The Sticky header remains fixed in place as you scroll down the page, ensuring easy access to navigation at all times.

Sidebar

Onomis offers various layout options, including default (classic), compact, and detached side menus, each with its own unique features. Check out the Demo to explore them all.

• The Compact sidebar menu features a sleek expanding animation that activates on hover, enhancing your navigation experience.

• The Detached sidebar is set apart from the main content, giving the layout a cleaner and more organized look.

TIP

To view the potential customizations or adjustments, please refer to the details provided here:

• Default Layout

• Header

• Sidebar

Blank

This layout features no sidebar or header, making it perfect for designing authentication pages.

Related: Blank Layout

Error

This layout is designated to display error pages.

Related: Error Layout

navigation

This directory includes all the nav items.

The index.js file is imported in src/layout/Default.jsx

navigation
 ├── 📜 Dashboards.js 
 ├── 📜 Charts.js
 ├── 📜 Elements.js
 ├── 📜 Forms.js
 ├── ...
 └── 📜 index.js  // Includes all of the nav items

pages

This directory contains your app pages.

Here's an example 👀

1. Go to the src/pages/ directory

2. Create a new file : src/pages/Home.jsx

   const Home = () => {
     return <h1>home page</h1>;
   };
   
   export default Home;

3. add it to your route in src/routes/Router.jsx file:

   const routes = [
     {
       path: "home",
       element: <Home />,
     }
     // Other routes here ...
   ]

4. Now, visit the /home route to see the newly created route in action! 🕵️‍♂️

views

Large pages can be broken down into smaller chunks and saved in this folder.