UI updation in Header file at dropdown in mobile view. #470

Closed
kartik.sharma wants to merge 2 commits from Kartik_Bug#1462 into OnFieldWork_V1

View File

@ -161,7 +161,7 @@ const Header = () => {
className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" className="layout-navbar container-fluid mb-3 navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar" id="layout-navbar"
> >
<div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none"> <div className="layout-menu-toggle navbar-nav align-items-xl-center me-2 me-xl-0 d-xl-none">
<a <a
aria-label="toggle for sidebar" aria-label="toggle for sidebar"
className="nav-item nav-link px-0 me-xl-4" className="nav-item nav-link px-0 me-xl-4"
@ -174,12 +174,13 @@ const Header = () => {
id="navbar-collapse" id="navbar-collapse"
> >
{showProjectDropdown && ( {showProjectDropdown && (
<div className="align-items-center"> <div className="d-flex align-items-center">
<i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i> <i className="rounded-circle bx bx-building-house bx-sm"></i>
<div className="btn-group">
<div className="btn-group w-100">
{shouldShowDropdown ? ( {shouldShowDropdown ? (
<button <button
className={`btn btn-sm-sm btn-xl dropdown-toggle px-1`} className="btn btn-sm btn-block dropdown-toggle text-truncate fs-6"
type="button" type="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
@ -187,7 +188,7 @@ const Header = () => {
{currentProjectDisplayName} {currentProjectDisplayName}
</button> </button>
) : ( ) : (
<span className="btn btn-sm-sm btn-xl px-1"> <span className="btn btn-sm btn-block text-truncate">
{currentProjectDisplayName} {currentProjectDisplayName}
</span> </span>
)} )}
@ -197,7 +198,7 @@ const Header = () => {
projectsForDropdown.length > 0 && ( projectsForDropdown.length > 0 && (
<ul <ul
className="dropdown-menu" className="dropdown-menu"
style={{ overflow: "auto", maxHeight: "300px" }} style={{ overflowY: "auto", maxHeight: "300px" }}
> >
<li> <li>