Dynamic UI Control: Managing Menu Visibility in Seyfolio

Managing the visibility of UI components is a critical part of maintaining a responsive and clean user interface. In the seyfolio project, I recently focused on implementing better control over menu visibility to improve the user experience during navigation.

The Challenge

When building dashboards or portfolios, having a cluttered UI can overwhelm the user. We needed a way to toggle the visibility of our side menus without triggering unnecessary re-renders of the entire page or breaking the layout flow provided by Ant Design components.

The Implementation

To achieve this, I utilized React state to manage the visibility status. By keeping the logic centralized, we can easily toggle the menu from anywhere in the component tree.

import React, { useState } from 'react';
import { Menu } from 'antd';

const Sidebar = () => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Menu
      </button>
      {isVisible && (
        <Menu mode="inline">
          <Menu.Item>Home</Menu.Item>
          <Menu.Item>Projects</Menu.Item>
        </Menu>
      )}
    </div>
  );
};

This snippet demonstrates the core concept: a simple boolean state that dictates whether the menu renders. Using isVisible && <Menu /> ensures that the component is unmounted from the DOM when hidden, rather than just hidden with CSS.

Refinement with Styled Components

For more complex animations, we combine this logic with Styled Components to ensure that the transition between visible and hidden states is smooth and consistent across the application.

import styled from 'styled-components';

const MenuWrapper = styled.div`
  display: ${props => (props.$isOpen ? 'block' : 'none')};
  transition: all 0.3s ease;
`;

By leveraging transient props in Styled Components (prefixed with $), we prevent attributes from being passed down to the underlying DOM elements, keeping our console clean of React warnings.

Key Takeaways

• Unmount vs Hide: Deciding between display: none and unmounting depends on if you need to keep internal component state alive.
• State Locality: Keep visibility state as close to the UI component as possible to minimize prop drilling.
• Clean DOM: Use transient props in Styled Components to maintain valid HTML and avoid React console errors.

Generated with Gitvlg.com