Navigation & Interface

Mosic features a clean, intuitive interface with two main sidebars: a compact icon-based left sidebar for high-level navigation, and a detailed right sidebar for workspace organization. This guide explains how to navigate through Mosic effectively.

Interface Layout

Mosic’s interface consists of three main areas:

1. Left Icon Sidebar: Quick access to main sections (Home, Projects, Tags)
2. Right Detailed Sidebar: Workspace navigation and organization
3. Main Content Area: Your active page or task view

Left Icon Sidebar

The narrow left sidebar provides quick navigation to major sections with tooltips on hover.

Navigation Icons

Bottom Icons

Located at the bottom of the left sidebar:

• Theme Toggle (Sun icon) - Switch between light and dark mode
• User Avatar - Access user menu and profile options
• Settings (Gear icon) - Opens Settings & Preferences page
• Help (Lifebuoy icon) - Access Help Center and support resources

Drag & Drop Support: The Home icon accepts task drops to set start date to today.

Right Detailed Sidebar

The detailed sidebar changes based on your current section, providing contextual navigation and organization tools.

Home Sidebar (Personal View)

Active when viewing: Today, Inbox, Upcoming, Feed, or Personal Dashboard

Header:

• Workspace switcher dropdown (shows current workspace name)

Quick Actions:

• ”+ Add New Task” button - Opens task creation modal

Main Navigation:

Badge Indicators:

• Task counts shown next to Today and Inbox
• Feed count shown with red styling for unread items
• Counts update in real-time as tasks change

Drag & Drop:

• Today: Drop tasks to set start date to today
• Inbox: Drop tasks to clear dates (unscheduled)

Scrollable Section:

• Pinned - Favorite spaces, projects, lists, tasks, and tags for quick access

Projects Sidebar (Organization View)

Active when viewing: Spaces, Projects, Lists, Tasks, or Workspace Dashboard

Header:

• Workspace switcher dropdown
• ”+ Add New Task” button

Main Navigation:

Spaces Hierarchy Section:

Shows expandable hierarchy organized by:

1. Spaces (top level)
   • Expandable to show projects within
   • “Add Project” button when expanded (if permitted)
2. Projects (within spaces)
   • Expandable to show task lists
   • “Add Task List” button when expanded (if permitted)
3. Task Lists (within projects)
   • Click to navigate to list view
   • Shows count of open tasks
   • Drag & drop enabled to move tasks between lists

Projects Without Space:

• Projects not assigned to a space appear at the top
• Same expandable hierarchy as space projects

Quick Add Actions:

• Plus (+) button next to “Spaces” heading - Create new space
• “Add Project” button in expanded spaces
• “Add Task List” button in expanded projects

Drag & Drop:

• Task Lists: Draggable between projects
• Tasks: Drop on lists to move them
• Projects: Drop lists to assign them

Additional Sidebar Views

Tags Sidebar: Active when viewing /Tags or /Tag pages

• Tag-specific navigation and organization

Settings Sidebar: Active when viewing /Settings or /Profile pages

• Settings navigation menu

Help Sidebar: Active when viewing /Help pages

• Help Center navigation

Workspace Switcher

Located at the very top of the right sidebar in both Home and Projects views.

Features:

• Shows current workspace name
• Dropdown menu for switching between workspaces
• Available in both Home and Projects sidebars
• Filters all content to show only items in selected workspace

How to Switch:

1. Click on the workspace name at the top of the sidebar
2. Select a different workspace from the dropdown
3. All views and navigation update to show that workspace’s content

Pinned Items

The Pinned section appears in the Home Sidebar for quick access to favorite items.

What Can Be Pinned:

• Spaces
• Projects
• Task Lists
• Individual Tasks
• Tags

Features:

• Collapsible section with arrow toggle
• Shows star icon for pinned items
• Displays count badges (e.g., open tasks in a list)
• Private items shown with lock icon
• Custom colors and icons maintained
• Drag & drop for reordering pinned items

How to Use Pinned Items:

• Click any pinned item to navigate to its detail page
• Drag tasks onto pinned lists to move them
• Drag tasks onto pinned tags to apply the tag
• Expand/collapse the Pinned section with the arrow icon

Hierarchical Navigation

The Projects Sidebar provides a complete hierarchical view of your workspace organization.

Hierarchy Structure

Workspace (shown in switcher)
├── Space 1
│   ├── Project A
│   │   ├── Task List 1 (with count)
│   │   ├── Task List 2 (with count)
│   │   └── Task List 3 (with count)
│   └── Project B
│       └── Task List 4 (with count)
├── Space 2
│   └── Project C
└── Projects without space
    └── Standalone Project
        └── Task Lists

Expandable Sections

How to Expand/Collapse:

1. Click the arrow icon (chevron) next to any space or project name
2. Sections expand to reveal nested items
3. Collapsed sections show count badges indicating total items
4. State persists during your session

Visual Indicators:

• Indentation shows hierarchy level
• Icons with custom colors for each item
• Count badges show open/incomplete items
• Lock icon indicates private items
• Blue highlight shows active/current page

Drag & Drop Navigation

Mosic supports drag and drop for efficient task management directly from the sidebar.

Supported Operations:

1. Tasks → Lists: Drag a task onto any list in the hierarchy to move it
2. Tasks → Pinned Lists: Drop tasks on pinned lists for quick reassignment
3. Tasks → Pinned Tags: Drop tasks on pinned tags to apply the tag
4. Tasks → Today: Drop tasks on the Today navigation item to set start date
5. Tasks → Inbox: Drop tasks on Inbox to clear dates (unscheduled)
6. Lists → Projects: Drag lists between projects in the hierarchy
7. Pinned Items: Reorder pinned items by dragging

Visual Feedback:

• Items become semi-transparent while dragging
• Drop zones highlight (blue background) on hover
• Cursor changes to indicate valid drop targets

Navigation Tips

Efficient Navigation

1. Use the Icon Sidebar for quick section switching (Home ↔ Projects ↔ Tags)
2. Pin frequently used items to the Pinned section for one-click access
3. Collapse unused sections in the hierarchy to reduce scrolling
4. Use workspace switcher to quickly change workspaces without leaving the page
5. Drag and drop tasks directly from the main view onto sidebar items

Organization Best Practices

1. Keep Pinned section focused - Only pin items you access multiple times daily
2. Collapse completed spaces/projects - Reduce visual clutter by hiding inactive work
3. Use the hierarchy wisely - Expand only sections you’re actively working in
4. Monitor count badges - Quick way to see workload across projects and lists
5. Leverage drag & drop - Faster than opening tasks to reassign them

Keyboard & Navigation

• Active page is highlighted with blue background in navigation
• Click any navigation item to instantly switch views
• Sidebar state (expanded/collapsed sections) persists during your session
• Theme changes apply immediately to both sidebars

Understanding the Two-Sidebar System

Why Two Sidebars?

Mosic uses a two-tier navigation system for efficiency:

Left Icon Sidebar:

• Always visible for quick context switching
• Minimal width preserves screen space
• Section-level navigation (Home vs Projects vs Tags)

Right Detailed Sidebar:

• Contextual content based on current section
• Rich navigation within the active section
• Collapsible hierarchies for organization
• Quick actions and creation buttons

This design lets you:

• Navigate between major sections quickly (left sidebar)
• Dive deep into organization within sections (right sidebar)
• Maximize content area while maintaining easy navigation
• Switch contexts (workspaces, sections) without losing your place

Troubleshooting Navigation

Can’t Find an Item in Sidebar

Solutions:

1. Check if the section is collapsed - click the arrow to expand
2. Verify you’re in the correct workspace (check workspace switcher)
3. Check if you’re in Home vs Projects view (use left icon sidebar to switch)
4. Look in the Pinned section if you previously starred it
5. Use the main navigation to access global views (All Spaces, All Projects, All Tasks)

Sidebar Sections Don’t Expand

Solutions:

1. Ensure you’re clicking the arrow icon, not the section name
2. Section name navigates to that view, arrow expands/collapses
3. Some sections may be empty - they show “No Items” when expanded

Drag & Drop Not Working

Solutions:

1. Verify the item is draggable (task lists and tasks primarily)
2. Ensure drop target accepts the item type (lists accept tasks, projects accept lists)
3. Look for blue highlight on drop zone
4. Try clicking and holding briefly before dragging

Counts Seem Wrong

Possible Reasons:

• Counts show open/incomplete items only
• Archived items are excluded from counts
• Workspace filter may be active
• Counts update in real-time - refresh if stale

Next Steps

• Tasks - Learn about creating and managing tasks
• Organization - Understand Spaces, Projects, and Lists
• Daily Workflow - Use the Today page effectively
• Tags - Organize with multi-entity tagging