How to Create a Collapsible Sidebar in Python Tkinter

In this Python Tutorial we will see How to Create a wooden chess board using Python's built-in Tkinter library.
What We Are Gonna Use In This Project:

- Python Programming Language.
- Tkinter (GUI).
- VS Editor.
Project Source Code:
import tkinter as tk
import time
import math


class ModernSidebar(tk.Frame):
    """
    A modern, animated sidebar widget for tkinter applications.
    """
    
    def __init__(self, parent):
        # Initialize the parent Frame class
        super().__init__(parent)
        
        # ===== SIDEBAR DIMENSIONS =====
        # These control how wide the sidebar is when expanded/collapsed
        self.EXPANDED_WIDTH = 280    # Width when sidebar is open
        self.COLLAPSED_WIDTH = 70    # Width when sidebar is closed
        
        # ===== ANIMATION SETTINGS =====
        # Controls how smooth the expand/collapse animation looks
        self.ANIMATION_DURATION = 300  # Animation time in milliseconds
        
        # ===== COLOR SCHEME =====
        self.PRIMARY_COLOR = "#1f2937"    # Main dark background
        self.SECONDARY_COLOR = "#111827"  # Slightly darker shade
        self.ACCENT_COLOR = "#10b981"     # Green accent color
        self.HOVER_COLOR = "#374151"      # Color when hovering over buttons
        self.TEXT_COLOR = "#f3f4f6"       # Light text color
        self.CONTENT_BG = "#f9fafb"       # Light background for main content
        
        # ===== STATE VARIABLES =====
        # These keep track of the sidebar's current state
        self.is_collapsed = False         # Is the sidebar currently collapsed?
        self.current_width = self.EXPANDED_WIDTH  # Current width of sidebar
        self.animating = False           # Is an animation currently running?
        self.active_button = None        # Which menu button is currently selected
            
        # Set up the user interface
        self.setup_ui()
    
    def setup_ui(self):
        """
        Creates all the visual elements of the sidebar.
        This is like building the skeleton of our interface.
        """
        
        # Configure the main frame (the container for everything)
        self.configure(bg=self.PRIMARY_COLOR)
        
        # ===== CREATE THE SIDEBAR CONTAINER =====
        # This frame holds all the sidebar content (logo, menu, buttons)
        self.sidebar = tk.Frame(
            self,
            bg=self.PRIMARY_COLOR,
            width=self.EXPANDED_WIDTH,
            highlightthickness=0  # Remove ugly border
        )
        self.sidebar.pack(side="left", fill="y")
        self.sidebar.pack_propagate(False)  # Don't let children resize this frame
        
        # ===== CREATE THE LOGO SECTION =====
        self.create_logo_section()
        
        # ===== CREATE A SEPARATOR LINE =====
        # This adds a subtle line between logo and menu
        separator = tk.Frame(self.sidebar, height=1, bg="#374151")
        separator.pack(fill="x", padx=15, pady=(0, 15))
        
        
        # ===== CREATE THE MENU SECTION =====
        self.create_menu_section()
        
        # ===== CREATE THE COLLAPSE BUTTON =====
        self.create_collapse_button()
        
        # ===== CREATE THE MAIN CONTENT AREA =====
        self.create_content_area()
        

     
    def create_logo_section(self):
        """
        Creates the logo area at the top of the sidebar.
        Shows full text when expanded, initials when collapsed.
        """
        
        # Container for logo elements
        self.logo_frame = tk.Frame(self.sidebar, bg=self.PRIMARY_COLOR)
        self.logo_frame.pack(fill="x", padx=15, pady=(25, 20))
        
        # Full logo text (shown when expanded)
        self.logo_text = tk.Label(
            self.logo_frame,
            text="Modern Sidebar",
            font=("Arial", 20, "bold"),
            fg=self.ACCENT_COLOR,
            bg=self.PRIMARY_COLOR
        )
        self.logo_text.pack(anchor="w")  # Align to left (west)
        
        # Short logo (shown when collapsed)
        self.logo_icon = tk.Label(
            self.logo_frame,
            text="MS",
            font=("Arial", 22, "bold"),
            fg=self.ACCENT_COLOR,
            bg=self.PRIMARY_COLOR
        )
        # Note: logo_icon is created but not packed yet - it will show when collapsed
    

    def create_menu_section(self):
        """
        Creates the menu buttons section of the sidebar.
        Each button has an icon and text label.
        """
        
        # Container for all menu buttons
        self.menu_frame = tk.Frame(self.sidebar, bg=self.PRIMARY_COLOR)
        self.menu_frame.pack(fill="both", expand=True, padx=10, pady=5)
        
        # ===== DEFINE MENU ITEMS =====
        # Each item has: (display_text, icon_function, tooltip_text)
        self.menu_items = [
            ("Dashboard", self.create_dashboard_icon, "View your dashboard"),
            ("Menu", self.create_menu_icon, "Manage menu items"),
            ("Orders", self.create_orders_icon, "Track orders"),
            ("Customers", self.create_customers_icon, "Customer management"),
            ("Analytics", self.create_analytics_icon, "View analytics"),
            ("Inventory", self.create_inventory_icon, "Manage inventory"),
            ("Marketing", self.create_marketing_icon, "Marketing campaigns"),
            ("Settings", self.create_settings_icon, "System settings")
        ]
        
        # ===== CREATE MENU BUTTONS =====
        # Store all buttons in a list so we can manage them later
        self.menu_buttons = []
        
        # Loop through each menu item and create a button for it
        for i, (text, icon_func, tooltip) in enumerate(self.menu_items):
            button = self.create_menu_button(text, icon_func, tooltip, i)
            self.menu_buttons.append(button)
        
        # Make the first button active by default
        self.set_active_button(self.menu_buttons[0], 0)
    

    def create_menu_button(self, text, icon_func, tooltip, index):
        """
        Creates a single menu button with icon and text.
        
        Args:
            text: The text to display on the button
            icon_func: Function that draws the icon
            tooltip: Text to show when hovering (when collapsed)
            index: Position of this button in the menu
        """
        
        # ===== CREATE BUTTON CONTAINER =====
        button_frame = tk.Frame(self.menu_frame, bg=self.PRIMARY_COLOR, height=52)
        button_frame.pack(fill="x", pady=5)
        button_frame.pack_propagate(False)
        
        # ===== CREATE ACTIVE INDICATOR =====
        # This colored bar shows which button is currently selected
        indicator = tk.Frame(button_frame, width=4, bg=self.PRIMARY_COLOR)
        indicator.pack(side="left", fill="y")
        
        # ===== CREATE BUTTON CONTENT CONTAINER =====
        content = tk.Frame(button_frame, bg=self.PRIMARY_COLOR)
        content.pack(side="left", fill="both", expand=True, padx=8, pady=8)
        
        # ===== CREATE ICON =====
        # Canvas allows us to draw custom icons
        icon_canvas = tk.Canvas(
            content,
            width=24,
            height=28,
            bg=self.PRIMARY_COLOR,
            highlightthickness=0,  # Remove border
            bd=0                   # Remove border
        )
        icon_canvas.pack(side="left", padx=(5, 10))
        
        # Draw the icon using the provided function
        icon_func(icon_canvas, self.TEXT_COLOR)
        
        # ===== CREATE TEXT LABEL =====
        text_label = tk.Label(
            content,
            text=text,
            font=("Arial", 11),
            fg=self.TEXT_COLOR,
            bg=self.PRIMARY_COLOR,
            anchor="w"  # Align text to left
        )
        text_label.pack(side="left", fill="x", expand=True)
        
        # ===== STORE REFERENCES =====
        # Store important parts in the frame so we can access them later
        button_frame.indicator = indicator
        button_frame.icon_canvas = icon_canvas
        button_frame.text_label = text_label
        button_frame.content = content
        button_frame.index = index
        button_frame.icon_func = icon_func
        
        # ===== BIND CLICK EVENTS =====
        # Make all parts of the button clickable
        for widget in [button_frame, content, icon_canvas, text_label]:
            widget.bind("<Button-1>", lambda e, f=button_frame, 
                            i=index: self.on_button_click(f, i))
            widget.bind("<Enter>", lambda e, f=button_frame: self.on_button_hover(f))
            widget.bind("<Leave>", lambda e, f=button_frame: self.on_button_leave(f))
            pass
        
        # Add tooltip for collapsed state
        self.create_tooltip(button_frame, tooltip)
        
        return button_frame
    
    
    def create_tooltip(self, widget, text):
        """
        Creates a tooltip that appears when hovering over buttons in collapsed mode.
        """
        
        def show_tooltip(event):
            # Only show tooltip when sidebar is collapsed
            if self.is_collapsed:
                # Calculate position for tooltip
                x = widget.winfo_rootx() + 75
                y = widget.winfo_rooty() + 20
                
                # Create tooltip window
                self.tooltip = tk.Toplevel(widget)
                self.tooltip.wm_overrideredirect(True)  # Remove window decorations
                self.tooltip.wm_geometry(f"+{x}+{y}")
                
                # Create tooltip content
                tooltip_frame = tk.Frame(self.tooltip, bg=self.SECONDARY_COLOR)
                tooltip_frame.pack()
                
                label = tk.Label(
                    tooltip_frame,
                    text=text,
                    bg=self.SECONDARY_COLOR,
                    fg=self.TEXT_COLOR,
                    font=("Arial", 10)
                )
                label.pack(padx=10, pady=6)
        
        def hide_tooltip(event):
            # Remove tooltip if it exists
            if hasattr(self, 'tooltip'):
                self.tooltip.destroy()
        
        # Bind hover events
        widget.bind('<Enter>', show_tooltip)
        widget.bind('<Leave>', hide_tooltip)
    




    def create_collapse_button(self):
        """
        Creates the button that collapses/expands the sidebar.
        """
        
        # Container for the collapse button
        bottom_frame = tk.Frame(self.sidebar, bg=self.PRIMARY_COLOR)
        bottom_frame.pack(side="bottom", fill="x", pady=15)
        
        # The actual collapse button
        self.collapse_button = tk.Button(
            bottom_frame,
            text="◄",  # Left arrow when expanded
            font=("Arial", 12),
            fg=self.TEXT_COLOR,
            bg=self.SECONDARY_COLOR,
            activebackground=self.ACCENT_COLOR,  # Color when clicked
            activeforeground="#ffffff",
            bd=0,        # No border
            width=6,
            height=2,
            cursor="hand2",  # Hand cursor on hover
            relief="flat",   # Flat appearance
            command=self.toggle_sidebar  # Function to call when clicked
        )
        self.collapse_button.pack(fill="x")
    
    
    def toggle_sidebar(self):
        """
        Expands or collapses the sidebar with smooth animation.
        This is the main function that creates the sliding effect.
        """
        
        # Don't start new animation if one is already running
        if self.animating:
            return
        
        # Mark that animation is starting
        self.animating = True
        
        # Determine target width and calculate animation parameters
        target_width = self.COLLAPSED_WIDTH \
                        if not self.is_collapsed \
                        else self.EXPANDED_WIDTH
        start_width = self.current_width
        width_difference = target_width - start_width
        start_time = time.time()
        
        # Switch logo display immediately
        if not self.is_collapsed:
            # Going to collapsed state - show icon only
            self.logo_text.pack_forget()
            self.logo_icon.pack(anchor="center")
        else:
            # Going to expanded state - show full text
            self.logo_icon.pack_forget()
            self.logo_text.pack(anchor="w")
            
        def animate_step():
            """
            This function runs repeatedly to create the animation effect.
            It's called every 16 milliseconds.
            """
            
            # Calculate how much time has passed
            elapsed_time = time.time() - start_time
            
            # Check if animation is complete
            if elapsed_time >= self.ANIMATION_DURATION / 1000:
                # Animation finished - set final state
                self.update_sidebar_width(target_width)
                self.is_collapsed = not self.is_collapsed
                self.collapse_button.configure(text="►" if self.is_collapsed else "◄")
                self.update_button_layout()
                self.animating = False
                return
           
            # Calculate animation progress (0 to 1)
            progress = elapsed_time / (self.ANIMATION_DURATION / 1000)
             
            # Apply easing for smoother animation
            eased_progress = self.ease_out_cubic(progress)
            
            # Calculate new width and update sidebar
            new_width = start_width + (width_difference * eased_progress)
            self.update_sidebar_width(new_width)
            
            # Schedule next animation step
            self.after(16, animate_step) 
        
        # Start the animation
        animate_step()
    

    def ease_out_cubic(self, x):
        """
        Easing function that makes animation start fast and slow down.
        This creates a more natural, smooth animation effect.
        """
        return 1 - math.pow(1 - x, 3)
    
    def update_sidebar_width(self, width):
        """
        Updates the actual width of the sidebar.
        """
        self.current_width = width
        self.sidebar.configure(width=int(width))
    
    
    def update_button_layout(self):
        """
        Updates the layout of menu buttons when sidebar is collapsed/expanded.
        In collapsed mode, only icons are shown. In expanded mode, both icons and text.
        """
        
        for button in self.menu_buttons:
            if self.is_collapsed:
                # Hide text and center the icon
                button.text_label.pack_forget()
                button.icon_canvas.pack_forget()
                button.icon_canvas.pack(side="top", padx=0, pady=(10, 0), 
                                        anchor="center")
            else:
                # Show both icon and text
                button.icon_canvas.pack_forget()
                button.icon_canvas.pack(side="left", padx=(5, 10))
                button.text_label.pack(side="left", fill="x", expand=True)

        # Restore active button state
        if self.active_button:
            self.set_active_button(self.active_button, self.active_button.index)


    def create_content_area(self):
        """
        Creates the main content area next to the sidebar.
        This is where the actual application content would go.
        """
        
        # Main content container
        self.content_frame = tk.Frame(self, bg=self.CONTENT_BG)
        self.content_frame.pack(side="left", fill="both", expand=True)
        
        # Sample header for the content area
        header = tk.Frame(self.content_frame, bg=self.CONTENT_BG, height=70)
        header.pack(fill="x", padx=20, pady=10)
        header.pack_propagate(False)
        
        # Welcome message
        welcome_label = tk.Label(
            header,
            text="Welcome Back - Application Dashboard",
            font=("Arial", 24, "bold"),
            fg="#111827",
            bg=self.CONTENT_BG
        )
        welcome_label.pack(anchor="w", pady=10)
    
    
    # ===== ICON DRAWING FUNCTIONS =====
    # These functions draw simple icons using canvas drawing methods
    
    def create_dashboard_icon(self, canvas, color):
        """Draws a simple house/dashboard icon"""
        # House base
        canvas.create_rectangle(7, 14, 17, 24, outline=color, width=2)
        # House roof
        canvas.create_polygon(3, 14, 12, 5, 21, 14, fill="", outline=color, width=2)
    
    def create_menu_icon(self, canvas, color):
        """Draws three horizontal lines (hamburger menu)"""
        for y in [8, 14, 20]:
            canvas.create_line(5, y, 19, y, fill=color, width=2)
    
    def create_orders_icon(self, canvas, color):
        """Draws a clipboard with checkmarks"""
        # Clipboard
        canvas.create_rectangle(6, 2, 18, 22, outline=color, width=2)
        # Clip at top
        canvas.create_rectangle(10, 1, 14, 4, outline=color, width=2)
        # Checkmarks
        canvas.create_line(8, 8, 10, 10, fill=color, width=2)
        canvas.create_line(10, 10, 14, 6, fill=color, width=2)
        canvas.create_line(8, 14, 10, 16, fill=color, width=2)
        canvas.create_line(10, 16, 14, 12, fill=color, width=2)
    
    def create_customers_icon(self, canvas, color):
        """Draws a simple person icon"""
        # Head (circle)
        canvas.create_oval(8, 4, 16, 12, outline=color, width=2)
        # Body (arc)
        canvas.create_arc(6, 15, 18, 25, start=0, extent=180, 
                            outline=color, width=2, style="arc")
        # Connect head to body
        canvas.create_line(12, 12, 12, 15, fill=color, width=2)
    
    def create_analytics_icon(self, canvas, color):
        """Draws a simple chart/graph"""
        # Axes
        canvas.create_line(4, 20, 20, 20, fill=color, width=2)  # X-axis
        canvas.create_line(4, 4, 4, 20, fill=color, width=2)    # Y-axis
        # Chart line
        points = [4, 16, 7, 12, 10, 16, 13, 8, 16, 11, 20, 4]
        canvas.create_line(*points, fill=color, width=2, smooth=True)
    
         
    def create_inventory_icon(self, canvas, color):
            # Shelf frame
            canvas.create_line(4, 4, 4, 20, fill=color, width=2)  # Left support
            canvas.create_line(20, 4, 20, 20, fill=color, width=2) # Right support
            # Shelves
            canvas.create_line(4, 8, 20, 8, fill=color, width=2)
            canvas.create_line(4, 14, 20, 14, fill=color, width=2)
            canvas.create_line(4, 20, 20, 20, fill=color, width=2)
            # Items on shelves
            canvas.create_rectangle(6, 5, 9, 8, fill=color, outline="")
            canvas.create_rectangle(15, 5, 18, 8, fill=color, outline="")
            canvas.create_rectangle(7, 11, 10, 14, fill=color, outline="")
            canvas.create_rectangle(14, 11, 17, 14, fill=color, outline="")
       
    def create_marketing_icon(self, canvas, color):
        # Marketing icon with megaphone
        # Megaphone body
        canvas.create_polygon(4, 14, 4, 10, 12, 6, 12, 18, 4, 14, 
                                fill="", outline=color, width=2)
        # Handle
        canvas.create_rectangle(2, 10, 4, 14, outline=color, width=2, fill="")
        # Sound waves
        canvas.create_arc(12, 8, 18, 16, start=270, extent=180, style="arc", 
                            outline=color, width=1)
        canvas.create_arc(14, 6, 20, 18, start=270, extent=180, style="arc", 
                            outline=color, width=1)
        canvas.create_arc(16, 4, 22, 20, start=270, extent=180, style="arc", 
                            outline=color, width=1)
 
    
    def create_settings_icon(self, canvas, color):
        """Draws a gear/settings icon"""
        center_x, center_y = 12, 12
        # Gear teeth
        for angle in range(0, 360, 45):
            rad = math.radians(angle)
            inner_x = center_x + 6 * math.cos(rad)
            inner_y = center_y + 6 * math.sin(rad)
            outer_x = center_x + 9 * math.cos(rad)
            outer_y = center_y + 9 * math.sin(rad)
            canvas.create_line(inner_x, inner_y, outer_x, outer_y, fill=color, width=2)
        
        # Center circles
        canvas.create_oval(8, 8, 16, 16, outline=color, width=2)
        canvas.create_oval(10, 10, 14, 14, fill=color)
    
         



    def set_active_button(self, button_frame, index):
        """
        Makes a button the active/selected button.
        Updates colors and the indicator bar.
        """
        
        # Reset previous active button
        if self.active_button:
            self.active_button.configure(bg=self.PRIMARY_COLOR)
            self.active_button.content.configure(bg=self.PRIMARY_COLOR)
            self.active_button.text_label.configure(bg=self.PRIMARY_COLOR, 
                                                    fg=self.TEXT_COLOR)
            self.active_button.indicator.configure(bg=self.PRIMARY_COLOR, width=0)
            
            # Redraw previous active icon with normal color
            self.active_button.icon_canvas.delete("all")
            self.active_button.icon_func(self.active_button.icon_canvas, 
                                            self.TEXT_COLOR)
       
        # Set new active button
        button_frame.configure(bg=self.PRIMARY_COLOR)
        button_frame.content.configure(bg=self.PRIMARY_COLOR)
        button_frame.text_label.configure(bg=self.PRIMARY_COLOR, fg=self.ACCENT_COLOR)
        button_frame.indicator.configure(bg=self.ACCENT_COLOR, width=4)
         
        # Redraw icon with accent color
        button_frame.icon_canvas.configure(bg=self.PRIMARY_COLOR)
        button_frame.icon_canvas.delete("all")
        button_frame.icon_func(button_frame.icon_canvas, self.ACCENT_COLOR)
        
        # Update active button reference
        self.active_button = button_frame
    


    
    # ===== EVENT HANDLING FUNCTIONS =====
    # These functions respond to user interactions
    
    def on_button_click(self, button_frame, index):
        """
        Called when a menu button is clicked.
        Changes the active button and updates the display.
        """
        self.set_active_button(button_frame, index)

    def on_button_hover(self, button_frame):
        """
        Called when mouse hovers over a button.
        Changes the button's appearance to show it's interactive.
        """    
        # Don't change active button appearance
        if button_frame == self.active_button:
            return
        
        # Change colors to show hover state
        button_frame.configure(bg=self.HOVER_COLOR)
        button_frame.content.configure(bg=self.HOVER_COLOR)
        button_frame.icon_canvas.configure(bg=self.HOVER_COLOR)
        button_frame.text_label.configure(bg=self.HOVER_COLOR, fg="#ffffff")
        
        # Redraw icon with brighter color
        button_frame.icon_canvas.delete("all")
        button_frame.icon_func(button_frame.icon_canvas, "#ffffff")

    def on_button_leave(self, button_frame):
        """
        Called when mouse leaves a button.
        Resets the button's appearance to normal.
        """
        # Don't change active button appearance
        if button_frame == self.active_button:
            return
        
        # Reset to normal colors
        button_frame.configure(bg=self.PRIMARY_COLOR)
        button_frame.content.configure(bg=self.PRIMARY_COLOR)
        button_frame.icon_canvas.configure(bg=self.PRIMARY_COLOR)
        button_frame.text_label.configure(bg=self.PRIMARY_COLOR, fg=self.TEXT_COLOR)
        
        # Redraw icon with normal color
        button_frame.icon_canvas.delete("all")
        button_frame.icon_func(button_frame.icon_canvas, self.TEXT_COLOR)



class ModernApp(tk.Tk):
    """
    Main application window that contains the sidebar.
    This is the root window of our application.
    """
    
    def __init__(self):
        # Initialize the main window
        super().__init__()
        
        # ===== WINDOW CONFIGURATION =====
        self.title("Modern Sidebar Demo")
        self.geometry("1000x680")
        self.configure(bg="#ffffff")
        
        # ===== CREATE THE SIDEBAR =====
        sidebar = ModernSidebar(self)
        sidebar.pack(fill="both", expand=True)
        
        # ===== CENTER THE WINDOW ON SCREEN =====
        self.center_window()
    
    def center_window(self):
        """
        Centers the application window on the screen.
        """
        # Update window to get actual size
        self.update_idletasks()
        
        # Get window dimensions
        width = self.winfo_width()
        height = self.winfo_height()
        
        # Calculate center position
        x = (self.winfo_screenwidth() // 2) - (width // 2)
        y = (self.winfo_screenheight() // 2) - (height // 2)
        
        # Set window position
        self.geometry(f'+{x}+{y}')


# ===== MAIN PROGRAM =====
if __name__ == "__main__":
    # Create and run the application
    app = ModernApp()
    app.mainloop()  # Start the GUI event loop