Introduction
This document provides detailed steps for integrating and customizing the Menu Navigation Bar of the GluedIn SDK.
Steps to Integrate
To customize the Menu Navigation Bar, follow these instructions:
1. Locate the Sidebar Component: Navigate to src/components/Layouts/Sidebar in the project.
2. Add Menu Items: Modify the menu items within the provided code snippet based on your requirements.
Code Snippet for Menu Customization
Below is the enhanced code snippet for integrating and customizing the menu items:
<ul className="sidebar-ul">
{/* Home Menu Item */}
<li className={location.pathname === "/vertical-player" ? "active" : ""}>
<Link to="/vertical-player">
<HomeIcon />
{t("home")} {/* Translated "Home" label */}
</Link>
</li>
{/* Discover Menu Item */}
<li className={location.pathname === "/discover" ? "active" : ""}>
<Link to="/discover">
<DiscoverIcon />
{t("discover")} {/* Translated "Discover" label */}
</Link>
</li>
{/* Notifications Menu Item */}
<li className={location.pathname === "/notification" ? "active" : ""}>
<Link
to="/notification"
className="go-to-notification"
onClick={_navigateToNotification}
>
<NotificationIcon />
{t("notifications")} {/* Translated "Notifications" label */}
</Link>
</li>
{/* Profile Menu Item */}
<li className={location.pathname === "/my-profile" ? "active" : ""}>
<Link
to="/my-profile"
className="go-to-user-profile"
onClick={_navigateToProfile}
>
<ProfileIcon />
{t("profile")} {/* Translated "Profile" label */}
</Link>
</li>
{/* Logout Menu Item - Visible when user is logged in */}
{isLoggedin && (
<li onClick={_logoutUser}>
<button className="user-sign-out">
<LogoutIcon />
{t("text-logout")} {/* Translated "Logout" label */}
</button>
</li>
)}
</ul>
