Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design refinements #61

Merged
merged 17 commits into from
Jan 10, 2025
Merged

Design refinements #61

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
80d5062
Got justification working, ended up having to create another reusable…
ROlearyPro Jan 8, 2025
40270d4
Updated styling to reflect styling example branch
ROlearyPro Jan 8, 2025
03b8ca3
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Mo…
ROlearyPro Jan 9, 2025
ddfd27e
Various aria attributes added to MenuBar, both desktop and mobile (de…
ROlearyPro Jan 9, 2025
b1a37af
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Mo…
ROlearyPro Jan 9, 2025
ce42254
Minor design changes before pr
ROlearyPro Jan 9, 2025
8ddf73a
Final testing changes before pr
ROlearyPro Jan 9, 2025
4ce0a12
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Mo…
ROlearyPro Jan 9, 2025
667f0f9
Merge branch 'main' of github.com:turingschool/tracker-crm-fe into Mo…
ROlearyPro Jan 9, 2025
4a3dbcb
Fixed a space character that apparently caused problems?
ROlearyPro Jan 9, 2025
a041cec
Hopefully won't conflict with other menu bar branch now!
ROlearyPro Jan 10, 2025
65d2bb2
forgot to change bg color for something
ROlearyPro Jan 10, 2025
713a088
Modified things to fix text overflowing on mobile
ROlearyPro Jan 10, 2025
7f35a0b
Most recent version, still has a single issue with the test
ROlearyPro Jan 10, 2025
9206c43
Testing
ROlearyPro Jan 10, 2025
1efd81f
Hopefully final fix, figured out the scale changing was the cause of …
ROlearyPro Jan 10, 2025
a30b57c
Minor size change to logo in mobile menu, updated gif in readme
ROlearyPro Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion cypress/e2e/UserRegistration.spec.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,6 @@ describe('User Registration Form - Create New User', () => {
});
}).as('userSession');

cy.get('span').should('not.exist');
cy.url().should('eq', 'http://localhost:3000/home');
cy.contains('John Hill').should('be.visible');
});
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/jobsApplicationSpec.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,6 +401,6 @@ describe("View specific job app page when data fails to load", () => {
cy.wait("@showJobApplicationError");

cy.get('.text-red-600').should("have.text", "Unable to fetch job application data.");
cy.get('.text-gray-500').should("have.text", "Loading...")
cy.get('.text-gray-500').should("include.text", "Loading...")
});
})
30 changes: 15 additions & 15 deletions cypress/e2e/menuBarSpec.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,27 +90,27 @@ describe("Menu Bar after logging in spec", () => {
});

it("DMB should toggle the desktop plus sign dropdown menu when the plus sign icon is clicked", () => {
cy.get('[data-testid="plus-iconD"]').click();
cy.get("ul.bg-cyan-600")
cy.get('[data-testid="newmenu-iconD"]').click();
cy.get("ul.bg-cyan-800")
.should("have.class", "scale-100")
.and("be.visible");
cy.get('[data-testid="plus-iconD"]').click();
cy.get("ul.bg-cyan-600").should("have.class", "hidden");
cy.get('[data-testid="newmenu-iconD"]').click();
cy.get("ul.bg-cyan-800").should("have.class", "hidden");
});

it('DBM should close desktop plus sign dropdown after clicking a link', () => {
cy.get('[data-testid="plus-iconD"]').click();
cy.get('ul.bg-cyan-600').should('be.visible');
cy.get('[data-testid="newmenu-iconD"]').click();
cy.get('ul.bg-cyan-800').should('be.visible');

cy.contains('Add New Contact').click();
cy.url().should('include', '/contacts/new');

cy.get('ul.bg-cyan-600').should('not.be.visible');
cy.get('ul.bg-cyan-800').should('not.be.visible');
});

it('should have the desktop dropdown closed by default', () => {
cy.viewport(1280, 800);
cy.get('ul.bg-cyan-600').should('not.be.visible');
cy.get('ul.bg-cyan-800').should('not.be.visible');
});

it('should have the mobile menu hidden by default', () => {
Expand All @@ -119,10 +119,10 @@ it('should have the mobile menu hidden by default', () => {
});

it(" if plus icon is clicked multiple times, still behaves correctly", () => {
cy.get('[data-testid="plus-iconD"]').click();
cy.get('ul.bg-cyan-600').should('be.visible');
cy.get('[data-testid="plus-iconD"]').click().click().click();
cy.get('ul.bg-cyan-600').should('not.be.visible');
cy.get('[data-testid="newmenu-iconD"]').click();
cy.get('ul.bg-cyan-800').should('be.visible');
cy.get('[data-testid="newmenu-iconD"]').click().click().click();
cy.get('ul.bg-cyan-800').should('not.be.visible');
});

describe("Mobile Slide-out Menu", () => {
Expand Down Expand Up @@ -163,21 +163,21 @@ it(" if plus icon is clicked multiple times, still behaves correctly", () => {
});

it("MSM should render plus sign dropdown menu with link to add new contact", () => {
cy.get('[data-testid="plus-iconM"]').click();
cy.get('[data-testid="newmenu-iconM"]').click();
cy.contains("Add New Contact").should("exist");
cy.get('[data-testid="newContactLink"]').click();
cy.url().should("include", "/contacts/new");
});

it("MSM should render plus sign dropdown menu with link to add new company", () => {
cy.get('[data-testid="plus-iconM"]').click();
cy.get('[data-testid="newmenu-iconM"]').click();
cy.contains("Add New Company").should("exist");
cy.get('[data-testid="newCompanyLink"]').click();
cy.url().should("include", "/companies/new");
});

it("MSM should render dropdown menu with link to add new job application", () => {
cy.get('[data-testid="plus-iconM"]').click();
cy.get('[data-testid="newmenu-iconM"]').click();
cy.contains("Add New Job Application").should("exist");
cy.get('[data-testid="newAppLink"]').click();
cy.url().should("include", "/jobapplications/new");
Expand Down
259 changes: 134 additions & 125 deletions src/components/layout/MenuBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,135 +30,144 @@ function MenuBar() {

const linkClasses = ({ isActive }: { isActive: boolean }) =>
isActive
? "m-auto text-cyan-800 mt-[5vh] transform scale-150 transition-transform duration-150"
: "m-auto text-gray-500 mt-[5vh] transform scale-125 transition-transform duration-150";

return (
<div className="flex h-screen">
{/* -- DESKTOP NAV, hidden on small screens -- */}
<nav className="hidden sm:flex flex-col justify-items-center justify-evenly h-screen ml-5 mr-4 w-28">
{/* Logo */}
<Link className="m-auto cursor-pointer mt-[2vh]" to="/" data-testid="logo">
<img className="m-auto cursor-pointer" src={logo} alt="Logo" />
</Link>
{/* Home */}
<NavLink className={linkClasses} to="/home" data-testid="home-iconD">
<HomeIcon fontSize="large" />
</NavLink>
{/* Contacts */}
<NavLink className={linkClasses} to="/contacts" data-testid="contacts-iconD">
<PersonIcon fontSize="large" />
</NavLink>
{/* Companies */}
<NavLink className={linkClasses} to="/companies" data-testid="companies-iconD">
<ApartmentIcon fontSize="large" />
</NavLink>
{/* Job Applications */}
<NavLink className={linkClasses} to="/job_applications" data-testid="applications-iconD">
<DescriptionIcon fontSize="large" />
</NavLink>

{/* Drop Down Shortcut Menu */}
<div className="flex flex-col items-center justify-center relative">
<button className={`flex items-center justify-items-center ${isDropDownOpen ? "text-cyan-800" : "text-gray-500"}`}
onClick={toggleDropDown} data-testid="plus-iconD">
<AddCircleIcon fontSize="large" className="m-auto justify-items-center mt-[6vh]" />
</button>
<ul className={`absolute top-full left-0 bg-cyan-600 shadow-md rounded-md transition-all duration-700 ease-in-out
${isDropDownOpen ? "scale-100 opacity-100 visible" : "hidden"}`} style={{ zIndex: 10 }}>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2">
<Link to="/contacts/new" onClick={toggleDropDown}>
Add New Contact
</Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2">
<Link to="/companies/new" onClick={toggleDropDown}>
Add New Company
</Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center">
<Link to="/jobapplications/new" onClick={toggleDropDown}>
Add New Job Application
</Link>
</li>
</ul>
</div>

{/* Account */}
<NavLink
to="/userInformation"
className={({ isActive }) =>
isActive
? "m-auto mt-[20vh] rounded-full text-cyan-800 transform scale-150 transition-transform duration-150"
: "m-auto mt-[20vh] rounded-full text-gray-500 transform scale-125 transition-transform duration-150"
}
data-testid="update-user">
<AccountCircleIcon data-testid="updateUser-iconD" fontSize="large" />
</NavLink>
</nav>
? "m-auto text-cyan-800 mt-[5vh] transform scale-125 transition-transform duration-150"
: "m-auto text-gray-500 mt-[5vh] transform scale-100 transition-transform duration-150";
const mobileClasses = ({ isActive }: { isActive: boolean }) =>
isActive
? "ml-[15vw] mt-4 text-cyan-300 transform translate-x-20 scale-125 transition-transform duration-150"
: "ml-[15vw] mt-4 text-white transform scale-100 transition-transform duration-150";

{/* -- MOBILE HAMBURGER, shown on small screens only -- */}
<button className="flex items-center justify-items-center visible sm:hidden p-2" onClick={toggleSideMenu}>
<MenuIcon data-testid="menu-iconM" fontSize="large" className="m-auto justify-items-center"/>
</button>

{/* -- MOBILE SLIDE-OUT MENU, shown on small screens only -- */}
<nav className={"fixed flex flex-col top-0 left-0 z-10 bg-[#046576] w-64 h-screen transition-all duration-500 " +
(sideMenuOpen ? "-translate-x-full" : "translate-x-0")} data-testid="slideout-menu">
<button className="min-sm:hidden m-4 text-white" onClick={toggleSideMenu}>
<CloseIcon fontSize="large" data-testid="close-iconM" className="m-auto text-white"/>
return (
<div className='flex flex-row'>
{/* // Menu */}
<nav className='flex flex-col bg-slate-100 justify-evenly h-screen sm:w-1/12' >
{/* Desktop Menu */}
< nav className='flex flex-col fixed max-sm:hidden justify-items-center h-screen sm:w-1/12 ' >
{/* Logo */}
<Link className="m-auto cursor-pointer mt-[2vh]" data-testid="logo" to="/">
<img aria-label="logo" className="m-auto cursor-pointer" src={logo}/>
</Link>
{/* Home */}
<NavLink className={linkClasses} to="/home" data-testid="home-iconD">
<HomeIcon aria-label="Home" fontSize="large" />
<span hidden>&emsp; Home</span>
</NavLink>
{/* Contacts */}
<NavLink className={linkClasses} to="/contacts" data-testid="contacts-iconD">
<PersonIcon aria-label="Contacts" fontSize="large" />
<span hidden>&emsp; Contacts</span>
</NavLink>
{/* Companies */}
<NavLink className={linkClasses} to="/companies" data-testid="companies-iconD">
<ApartmentIcon aria-label="Companies" fontSize="large" />
<span hidden>&emsp; Companies</span>
</NavLink>
{/* Documents / Job Applications */}
<NavLink className={linkClasses} to="/job_applications" data-testid="applications-iconD">
<DescriptionIcon aria-label="Job Applications" fontSize="large" />
<span hidden>&emsp; Job Applications</span>
</NavLink>
{/* Drop Down Shortcut Menu */}
<div className="flex flex-col items-center justify-center relative">
<button className={`flex items-center justify-items-center aria-haspopup="true"
${isDropDownOpen ? "text-cyan-800" : "text-gray-500"}`} data-testid="newmenu-iconD" onClick={toggleDropDown}>
<AddCircleIcon aria-label="Add New" fontSize="large" className="m-auto justify-items-center mt-[6vh]" />
<span hidden>Add New...</span>
</button>
<ul className={`absolute top-full left-0 bg-cyan-800 shadow-md rounded-md transition-all text-white duration-700 ease-in-out
${isDropDownOpen ? 'scale-100 opacity-100 visible' : 'hidden'}`} style={{ zIndex: 10 }}>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2">
<Link to="/contacts/new" onClick={toggleDropDown}>Add New Contact</Link>
<span hidden>Add New Contact</span>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2">
<Link to="/companies/new" onClick={toggleDropDown}>Add New Company</Link>
<span hidden>Add New Company</span>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center">
<Link to="/jobapplications/new" onClick={toggleDropDown}>Add New Job Application</Link>
<span hidden>Add New Job Application</span>
</li>
</ul>
</div>
{/* Account */}
<NavLink
to="/userInformation"
className={({ isActive }) =>
isActive
? "m-auto mt-[15vh] rounded-full bg-blue-300 text-cyan-800 transform scale-150"
: "m-auto mt-[15vh] rounded-full bg-blue-300 text-gray-500 transform scale-100"
} data-testid="update-user">
<AccountCircleIcon aria-label="User Information" data-testid="updateUser-iconD" fontSize="large" />
<span hidden>Update User</span>
</NavLink>
</nav>

{/* -- MOBILE HAMBURGER, shown on small screens only -- */}
<button aria-hidden="false" className="flex items-center justify-items-center visible sm:hidden p-2" onClick={toggleSideMenu}>
<MenuIcon data-testid="menu-iconM" fontSize="large" className="m-auto justify-items-center" />
<span hidden>SideBar</span>
</button>

{/* Logo */}
<Link className="block text-center my-4" to="/" onClick={toggleSideMenu}>
<img className="mx-auto w-1/2" src={logo} alt="Logo" />
</Link>
{/* Home */}
<NavLink className="m-auto mt-[1vh] text-white" to="/home" data-testid="home-iconM" onClick={toggleSideMenu}>
<HomeIcon fontSize="large" />
</NavLink>
{/* Contacts */}
<NavLink className="m-auto mt-[1vh] text-white" to="/contacts" data-testid="contacts-iconM" onClick={toggleSideMenu}>
<PersonIcon fontSize="large" />
</NavLink>
{/* Companies */}
<NavLink className="m-auto mt-[1vh] text-white" to="/companies" data-testid="companies-iconM" onClick={toggleSideMenu}>
<ApartmentIcon fontSize="large" />
</NavLink>
{/* Job Applications */}
<NavLink className="m-auto mt-[1vh] text-white" to="/job_applications" data-testid="applications-iconM" onClick={toggleSideMenu}>
<DescriptionIcon fontSize="large" />
</NavLink>

{/* Drop Down Shortcut Menu (Mobile) */}
<div className="flex mt-auto flex-col items-center justify-center relative text-white">
<button className="flex items-center justify-items-center m-4" onClick={toggleDropDown}>
<AddCircleIcon data-testid="plus-iconM" fontSize="large" className="m-auto"/>
<nav data-testid="slideout-menu" className={"fixed overflow-hidden min-sm:invisible min-sm:hidden z-10 bg-opacity-100 inset-0 transform ease-in-out flex flex-col justify-items-center duration-500 bg-[#046576] justify-evenly h-screen sm:w-1/6 max-w-1/6 " + (sideMenuOpen ? " transition-opacity opacity-80 duration-500 -translate-x-full " : " transition-all opacity-100 translate-x-0")}>
<button aria-hidden="false" className="min-sm:hidden" onClick={toggleSideMenu}>
<CloseIcon fontSize="large" data-testid="close-iconM" className="m-auto text-white justify-items-center" />
<span aria-hidden="true" hidden>&emsp; Close Sidebar</span>
</button>
<ul className={`bg-cyan-500 m-4 shadow-md rounded-md transition-all duration-700 ease-in-out transform
${ isDropDownOpen ? "scale-100 opacity-100 visible" : "scale-95 opacity-0 invisible"}`}>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2 hover:text-black" onClick={() => {toggleSideMenu(); toggleDropDown();}}>
<Link data-testid="newContactLink" to="/contacts/new">
Add New Contact
</Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2 hover:text-black" onClick={() => {toggleSideMenu(); toggleDropDown();}}>
<Link data-testid="newCompanyLink" to="/companies/new">
Add New Company
</Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center hover:text-black" onClick={() => {toggleSideMenu(); toggleDropDown();}}>
<Link data-testid="newAppLink" to="/jobapplications/new">
Add New Job Application
</Link>
</li>
</ul>
</div>

{/* Account */}
<NavLink to="/userInformation" className="m-auto text-white" data-testid="update-userM" onClick={toggleSideMenu}>
<AccountCircleIcon data-testid="updateUser-iconM" fontSize="large" />
</NavLink>
{/* Logo */}
<Link aria-hidden="false" className="m-auto cursor-pointer" to="/">
<img className="m-auto w-1/2 cursor-pointerM" src={logo} alt="Logo" />
</Link>
{/* Home */}
<NavLink aria-hidden="false" className={mobileClasses} data-testid="home-iconM" to="/home" onClick={toggleSideMenu}>
<HomeIcon fontSize="large" />
<span aria-hidden="true" aria-label="Home">&emsp; Home</span>
</NavLink>
{/* Contacts */}
<NavLink aria-hidden="false" className={mobileClasses} to="/contacts" data-testid="contacts-iconM" onClick={toggleSideMenu}>
<PersonIcon fontSize="large" />
<span aria-hidden="true" aria-label="Contacts">&emsp; Contacts</span>
</NavLink>
{/* Companies */}
<NavLink aria-hidden="false" className={mobileClasses} to="/companies" data-testid="companies-iconM" onClick={toggleSideMenu}>
<ApartmentIcon fontSize="large" />
<span aria-hidden="true" aria-label="Companies">&emsp; Companies</span>
</NavLink>
{/* Job Applications */}
<NavLink aria-hidden="false" className={mobileClasses} to="/job_applications" onClick={toggleSideMenu}>
<DescriptionIcon data-testid="applications-iconM" fontSize="large" />
<span aria-hidden="true" aria-label="Job Applications">&emsp; Job Applications</span>
</NavLink>
{/* Drop Down Shortcut Menu */}
<div aria-hidden="false" className="flex ml-[15vw] mt-4 flex-col items-start justify-start relative">
<button aria-label="Add New" aria-haspopup="true" className="flex items-center justify-items-center text-white" onClick={toggleDropDown}>
<AddCircleIcon aria-label="Add New" data-testid="newmenu-iconM" fontSize="large" className="m-auto text-white justify-items-center" />
<span aria-hidden="true" >&emsp; Add New...</span>
</button>
<ul className={`bg-cyan-500 m-4 shadow-md rounded-md transition-all duration-700 ease-in-out transform
${isDropDownOpen ? 'scale-100 opacity-100 visible' : 'scale-95 opacity-0 invisible'}`}>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2 hover:text-black" onClick={() => { toggleSideMenu(); toggleDropDown(); }}>
<Link data-testid="newContactLink" to="/contacts/new">
<span aria-hidden="true" aria-label="Add New Contact">Add New Contact</span>
</Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center mb-2 hover:text-black" onClick={() => { toggleSideMenu(); toggleDropDown(); }}>
<Link data-testid="newCompanyLink" to="/companies/new"><span aria-hidden="false" aria-label="Add New Company">Add New Company</span></Link>
</li>
<li className="p-2 hover:bg-gray-100 rounded text-center hover:text-black" onClick={() => { toggleSideMenu(); toggleDropDown(); }}>
<Link data-testid="newAppLink" to="/jobapplications/new"> <span aria-hidden="false" aria-label="Add New Job Application">Add New Job Application</span></Link>
</li>
</ul>
</div>
{/* Account */}
<NavLink aria-hidden="false" to="/userInformation"
className="m-auto ml-[15vw] cursor-pointer text-white rounded-full"
data-testid="update-userM" onClick={toggleSideMenu}>
<AccountCircleIcon data-testid="updateUser-iconM" fontSize="large" className="m-auto rounded-full bg-cyan-500 text-white" />
<span aria-hidden="true" aria-label="Update User Profile">&emsp;Update Profile</span>
</NavLink>
<div className="m-auto h-auto"></div>
</nav >
</nav>

{/* -- QUAD COLOR BAR -- */}
Expand Down