Workspaces Theme

Version: 1.0.0 Parent: Blocksy Repository: derintolu/workspaces-theme

The main Hub theme implementing an app-like shell with fixed sidebar navigation for Lender Hub, Agent Hub, and Partner Hub.

Features

Hub Frame System

• Fixed Sidebar - 320px persistent left sidebar
• Header Bar - 60px bar with toggle, title, live clock
• Collapsible - Toggle between expanded (320px) and collapsed (64px)
• localStorage - Sidebar state persists across sessions

Integration Points

• Hub Pages - Hub shortcodes and assets
• Tutor LMS - Learning workspace with iframe template
• Blocksy Companion - Account modal for login
• Greenshift - Block patterns and sliders

Installation

1. Install and activate Blocksy theme
2. Upload workspaces theme
3. Activate as child theme
4. Assign menus to workspace_sidebar_menu and workspace_user_menu

Template Files

File	Purpose
workspace-sidebar-frame.php	Sidebar wrapper with header bar
workspace-sidebar-content.php	Menu, profile card, widgets
taxonomy-workspace.php	Workspace archive pages
tutor/single-course-iframe.php	Course display (iframe mode)

Widget Areas

Area	Purpose
workspace-sidebar-header	16:9 header slot for cover images/video
workspace-below-sidebar	Below sidebar content

Customizer Settings

Workspace Header Background

Setting	Options
Background Type	None, Image, Video
Background Image	Media upload
Background Video	URL input
Video Poster	Fallback image
Overlay Color	RGBA picker
Height	100-1000px

Theme.json Tokens

Colors

{
  "primary-blue": "#2563EB",
  "rich-teal": "#20D4DA",
  "light-blue": "#7DB3E8",
  "dark-charcoal": "#171A1F",
  "navy-base": "#263042",
  "off-white": "#F8F7F9"
}

Gradients

Slug	CSS
primary-gradient	linear-gradient(90deg, navy → blue → teal → light-blue)
hero-gradient	linear-gradient(135deg, #2563EB → #20D4DA)
dark-gradient	linear-gradient(180deg, #171A1F → #263042)

Custom Properties

--sidebar-width: 320px;
--sidebar-width-collapsed: 64px;
--sidebar-background: #020014;
--header-bar-height: 60px;
--hub-header-height: 60px;
--sidebar-z-index: 100;
--sidebar-transition: all 0.3s ease;

Sidebar Detection

The function workspaces_is_workspace_page() determines when to show the sidebar:

// Returns true for:
// - Pages with 'workspace' taxonomy term
// - Pages assigned to workspaces
// - Course/lesson pages (Tutor LMS)
// - Hub pages

Interactivity API

Sidebar Store

// Store: workspaces/sidebar
{
  state: {
    isCollapsed: false
  },
  actions: {
    toggleSidebar() { /* toggles state */ }
  },
  callbacks: {
    initFromStorage() { /* loads from localStorage */ }
  }
}

DateTime Store

// Store: workspaces/datetime
{
  state: {
    timeString: "12:00 PM",
    dateString: "January 25, 2026"
  },
  callbacks: {
    startClock() { /* updates every second */ }
  }
}

Navigation Walkers

Workspace_Nav_Walker

Renders sidebar menu with:

• Lucide icons from _menu_item_icon meta
• Collapsible submenus
• Active state styling
• Chevron animation on expand/collapse

// Add icon to menu item
update_post_meta($menu_item_id, '_menu_item_icon', 'home');

// Available icons: home, user, megaphone, clipboard,
// briefcase, calendar, settings, etc.

Hub Shortcodes

Content loaded via Hub shortcodes:

Shortcode	Purpose
[lrh_content_welcome]	Welcome message
[lrh_content_profile]	Profile display
[lrh_content_marketing]	Marketing tools
[lrh_content_quick_links]	Quick action links

Responsive Behavior

Breakpoint	Behavior
≥1000px	Full sidebar visible
768-999px	Sidebar as offcanvas
<768px	Hidden, toggle to show

Build Commands

npm run start  # Watch mode (wp-scripts)
npm run build  # Production build (wp-scripts)

CSS Architecture

style.css Sections

1. Sidebar Edge-to-Edge (lines 31-195) - Full viewport width
2. Fluent Booking Widgets (lines 197-388) - Dashboard cards
3. Brand Colors - CSS custom properties

Key Classes

.has-workspace-sidebar { /* Body class when sidebar active */ }
.workspace-frame { /* Workspace-specific layouts */ }
.sidebar-offcanvas { /* Mobile offcanvas state */ }