PySide6 Expandable Sidebar Menu — Qt Designer, QStackedWidget, Signals/Slots, Icons & QSS Styling

Build a modern expandable/collapsible sidebar menu in PySide6 using Qt Designer — complete with icon-only + expanded modes, checked state styling, and page switching via QStackedWidget. You’ll set up a clean UI, load icons through a resources.qrc, wire signals/slots for toggling, and route buttons to pages with a tidy Python class.

What you’ll build

-Icon-only ↔ expanded sidebar with a top toggle button
-Two mirrored button columns (icons-only vs icons+text) that stay in sync
-Auto-exclusive, checkable QPushButtons with active state styling (rounded corners)
-QStackedWidget pages: Dashboard, Profile, Messages, Notifications, Settings
-Resource pipeline: resources.qrc → resources_rc.py
-.ui to .py conversion with pyside6-uic and UTF-8 encoding fixes

Tech covered
PySide6 / Qt for Python, Qt Designer, QSS (stylesheets), Signals/Slots, QMainWindow, QPushButton, QLabel, QLineEdit, QStackedWidget, QSpacerItem, QMessageBox, QIcon, resources.qrc.

⏱️ Timestamps / Chapters

00:00 Demo — expandable sidebar (icon-only ↔ expanded)
00:39 Start in Qt Designer: new QMainWindow, clean menu/status bars
01:10 Save UI → sidebar.ui; project folder & /images icons overview
01:54 Add three base widgets: icon_only_widget, icon_name_widget, main_menu
02:58 Add header widget (search, profile), spacers & basic layouting
04:59 Add QStackedWidget below header; rename to header_widget
05:38 Create resources.qrc and import all icons (white/blue pairs)
06:16 Set pixmaps for profile labels; constrain to 40×40; scale contents
07:59 Sidebar look & feel with QSS (backgrounds, text color)
09:09 Label buttons: Dashboard, Profile, Messages, Notifications, Settings, Sign Out
10:18 Assign icons (white by default) to both sidebars
11:00 Global QSS for QPushButton: color, alignment, height, border:none, padding
12:24 Layout tuning: spacings, margins, vertical stacks
17:12 Make buttons checkable + autoExclusive
18:00 Layout header horizontally; set QStackedWidget background to white
18:51 Signals/Slots editor: toggle icon-only ↔ expanded visibility
20:01 Grid layout; margins zeroing; preview toggle
21:05 Cross-link check states (button groups mirror each other)
22:16 Checked-state QSS: bg #F5FFFE, text #1F95EF, bold, left radii
24:46 Assign blue icons for “Normal On” state (active)
26:12 Final polish: text to white, borders off where needed
27:03 Create five pages; add labels per page; verify switching
29:27 Add “Sign out” toggles to collapse menu; ensure checkable set
30:29 Rename all buttons (dashboard_1/_2 … settings_1/_2)
31:36 Move to VS Code; convert UI & resources; fix UTF-8 encoding
34:05 Build MySidebar(QMainWindow, Ui_MainWindow); setupUi(self); window title
34:20 Write page switchers; wire buttons to the right QStackedWidget index
36:01 main.py boilerplate; show window
36:50 Hide icon_name_widget by default; toggle to expand; test everything
37:22 Final run — menu expands/collapses; pages switch correctly; wrap-up

⚙️ Commands Used
pyside6-uic sidebar.ui -o sidebar.py
pyside6-rcc resources.qrc -o resources_rc.py