The left sidebar of the editor is your main navigation hub. It lets you open any page for editing, create new custom pages and jump to the Navigation editor.
The sidebar is split into two sections:
- Scrollable page list — all built-in and custom pages, grouped by category.
- Pinned bottom actions — the New Page button and the Navigation link.
📋 Editor
├── 📁 Home Page
│ └── 🔗 Home
├── 📁 Dashboard
│ └── 🔗 Personal Dashboard
├── 📁 Bookings
│ ├── 🔗 Resource List
│ ├── 🔗 Resource Calendar
│ ├── 🔗 Building Availability
│ └── 🔗 Booking Edit
├── 📁 Events
│ ├── 🔗 Events
│ ├── 🔗 Event Checkout
│ └── 🔗 Event Details
├── ...more categories...
├── 📄 My Custom Page 1
├── 📄 My Custom Page 2
─────────────────────────
+ New Page
🔗 Navigation
Built-in pages
Built-in pages are the standard portal pages that ship with every Nexudus location. They are organised into categories such as Home Page, Dashboard, Bookings, Events, Courses, Articles, Store, Team, My Activity, Community, FAQ, Contact and Personal.
Each category groups related pages together. If a category contains only one page, it is promoted directly to the top level to avoid a single-item expandable section.
Click any page name to open it in the editor canvas. The currently active page is highlighted.
Custom pages
Custom pages you have created appear below the built-in categories as flat items with a document icon. Click one to open it for editing.
New Page button
Clicking New Page opens a template picker modal with eight pre-made starting layouts:
| Template | Description |
|---|
| Blank | Empty page with only a navigation bar |
| Single Column | NavBar, a heading and a paragraph in a container |
| Two Columns | NavBar with a two-column responsive grid |
| Hero + Content | Full-width hero image followed by a content container |
| Hero + Two Columns | Hero image with a two-column grid below |
| Sidebar Layout | Main content area (8 columns) with a narrow sidebar (4 columns) |
| Landing Page | Hero, introduction section, three-column feature grid, and call-to-action |
| Feature Grid | 2×2 grid of pre-configured cards |
After selecting a template, the editor opens a new unsaved custom page. The template is applied once and the URL parameter is consumed — refreshing
the page will not re-apply the template.
Navigation link
The Navigation link at the bottom of the menu takes you to the Navigation editor, where you organise how pages appear in the portal’s top menu.
Blocks and Outline panels
Once a page is loaded in the editor, you interact with two built-in Puck panels on the left:
Blocks panel (Component drawer)
The Blocks panel lists every available component you can add to the page, grouped into categories:
| Category | Examples |
|---|
| Layout | Container, Stack, Div, Responsive Grid, Custom Grid, Separator, CustomerType |
| Text | Heading, Paragraph |
| Components | Card, Alert, Button, Image, YouTube Video |
| Home Page | HomePage, HomePageHero, NavBar |
| Dashboard | DashboardHero, QuickActions, AnnouncementsBanner, PersonalDashboardHeader, StatisticsSection |
| Bookings | ResourceList, ResourceCalendar, BookingEdit, PredictiveBookings |
| Events | EventPageRouter, FeaturedEventsList, UpcomingEvents |
| Courses | CoursePageRouter, FeaturedCourseList, CoursesList |
| Articles | BlogPageRouter, FeaturedBlogList, RecentBlogPosts |
| Store | SimpleProductGrid, SimplePlansGrid |
| Team | TeamMembersSection, TeamBookingsSection, TeamAttendanceSection, TeamPermissionsSection |
| My Activity | MyBookingsSection, MyInvoicesSection, MyVisitorsSection, MyDeliveriesSection, MyEventsSection, MyCoursesSection |
| Community | CommunityBoardListSection, DirectorySection, PerksSection |
| FAQ | FaqPageSection, HelpDeskSection |
| Contact | ContactUsPage |
AI Page Generation
At the top of the Blocks panel you will find a text area where you can describe the page you want to create in natural language (e.g. “Create a landing page with a hero image, three feature cards, and a call-to-action button”). Press Enter or click Generate to have the AI assistant produce a starting layout using available components. You can then refine the result manually.
- Press Enter to submit (use Shift + Enter for a new line).
- The AI takes the current page layout as context, so you can iteratively refine.
Outline panel
The Outline panel shows the component tree of the current page in a hierarchical list. It is useful for:
- Seeing the nesting structure at a glance.
- Selecting deeply nested components that are hard to click on the canvas.
- Understanding the order of components from top to bottom.
Click any item in the Outline to select it on the canvas and show its properties in the right-hand panel. 
