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