Phase 3: Migrate Layout Components

Depends on: Phase 2 complete
Result: App shell renders correctly — sidebar, navbar, mobile nav, auth layout, landing layout all styled with Tailwind.

Goal

Convert all layout components from Bulma utility classes to Tailwind. After this phase, navigating between pages works and the app shell looks correct in both light and dark mode.

Bulma → Tailwind Class Reference

Use this mapping throughout all layout files:

columns                       → grid grid-cols-12 gap-6
column is-X                   → col-span-X
is-flex                       → flex
is-align-items-center         → items-center
is-justify-content-space-between → justify-between
is-justify-content-center     → justify-center
is-justify-content-flex-end   → justify-end
is-flex-direction-column      → flex-col
is-flex-wrap-wrap             → flex-wrap
is-gap-1 … is-gap-6          → gap-1 … gap-6 (⚠️ scale differs at 4+)
mb-1 … mb-3                  → mb-1 … mb-3 (same)
mb-4                          → mb-6 (Bulma mb-4 = 1.5rem = Tailwind mb-6)
mb-5                          → mb-12 (Bulma mb-5 = 3rem)
p-4                           → p-6 (same scale issue)
has-text-centered             → text-center
has-text-left                 → text-left
has-text-right                → text-right
has-text-grey                 → text-muted-foreground
has-text-white                → text-white
is-uppercase                  → uppercase
title is-1                    → text-4xl font-bold font-heading
title is-2                    → text-3xl font-bold font-heading
title is-3                    → text-2xl font-bold font-heading
title is-4                    → text-xl font-bold font-heading
title is-5                    → text-lg font-bold font-heading
title is-6                    → text-base font-semibold font-heading
subtitle is-5                 → text-lg text-muted-foreground
subtitle is-6                 → text-base text-muted-foreground
is-size-7                     → text-xs
is-hidden                     → hidden
is-hidden-mobile              → hidden md:block
is-hidden-desktop             → md:hidden
is-fullwidth                  → w-full
container                     → container mx-auto
section                       → py-12
is-active                     → (conditional Tailwind classes)
is-loading                    → (loading state pattern)
has-background-*              → bg-*

Tasks

1. Migrate shared layout primitives

• [ ] src/components/layouts/shared/ViewWrapper.vue — container → container mx-auto, section padding
• [ ] src/components/layouts/shared/PageContent.vue — layout utility classes
• [ ] src/components/layouts/shared/PageContentWrapper.vue — layout utility classes
• [ ] src/components/layouts/shared/MobileOverlay.vue — is-active → conditional classes, backdrop
• [ ] src/components/layouts/shared/MobileBurger.vue — hamburger icon styling

2. Migrate sidebar layout

• [ ] src/components/layouts/sidebar/SidebarLayout.vue — main grid: sidebar + content area
• [ ] src/components/layouts/sidebar/Sidebar.vue — container, width, background, border, is-active states
• [ ] src/components/layouts/sidebar/SidebarItem.vue — nav item hover/active states, icons, text
• [ ] src/components/layouts/sidebar/SidebarPageHeading.vue — page title bar
• [ ] src/components/layouts/sidebar/SidebarSubsidebar.vue — secondary sidebar panel
• [ ] src/components/layouts/sidebar/SidebarSubsidebarMobile.vue — mobile variant

3. Migrate navbar layout

• [ ] src/components/layouts/navbar/NavbarLayout.vue — top bar layout
• [ ] src/components/layouts/navbar/Navbar.vue — container, brand, burger, menu
• [ ] src/components/layouts/navbar/NavbarItem.vue — nav links
• [ ] src/components/layouts/navbar/NavbarDropdown.vue — replace with shadcn DropdownMenu
• [ ] src/components/layouts/navbar/NavbarMegamenu.vue — mega menu panel
• [ ] src/components/layouts/navbar/NavbarItemMobile.vue — mobile nav item
• [ ] src/components/layouts/navbar/NavbarPageTitleMobile.vue — mobile page title
• [ ] src/components/layouts/navbar/NavbarSubsidebarMobile.vue — mobile sub-sidebar

4. Migrate mobile components

• [ ] src/components/layouts/shared/MobileNavbar.vue — bottom mobile nav bar
• [ ] src/components/layouts/shared/MobileSidebar.vue — mobile sidebar drawer (consider shadcn Sheet)

5. Migrate auth layout

• [ ] src/components/layouts/auth/ — all auth layout components (centered card, form container, background)

6. Migrate landing layout

• [ ] src/components/layouts/landing/ — landing page layout (hero sections, feature grids, CTAs)

7. Migrate minimal layout

• [ ] src/components/layouts/minimal/ — minimal header-only layout

8. Migrate navsearch layout

• [ ] src/components/layouts/navsearch/ — navbar with search

9. Migrate sideblock layout

• [ ] src/components/layouts/sideblock/ — right panel layout

10. Update root app shell

• [ ] src/VueroApp.vue — remove any Bulma body classes, ensure <RouterView> wrapper uses Tailwind layout

11. Convert scoped styles

• [ ] Replace any scoped <style lang="scss"> in layout files that references Bulma variables/mixins with Tailwind utilities or CSS custom properties

Files Modified

Total: ~20-25 files

Checklist

• [ ] Shared layout primitives migrated (ViewWrapper, PageContent, etc.)
• [ ] Sidebar layout renders: visible, correct width, themed background
• [ ] Sidebar collapse/expand works
• [ ] Navbar renders: brand, nav items, dropdown menus
• [ ] Mobile responsive: hamburger menu toggles
• [ ] Mobile sidebar opens/closes
• [ ] Mobile navbar renders at bottom
• [ ] Auth layout: centered form card with background
• [ ] Landing page layout: hero, features, CTA sections
• [ ] Minimal/navsearch/sideblock layouts render
• [ ] Root app shell works
• [ ] Dark mode: layout background, sidebar, navbar all theme correctly
• [ ] Navigation between pages works (router transitions)
• [ ] No Bulma classes remain in any layout file
• [ ] No scoped SCSS referencing Bulma variables
• [ ] pnpm build succeeds