Skip to content

Commit

Permalink
Merge pull request #61 from turingschool/Mobile-design
Browse files Browse the repository at this point in the history 
Design refinements
  • Loading branch information
@CCirbo
CCirbo authored Jan 10, 2025
2 parents 2990bc6 + a30b57c commit 0c76c7b
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 142 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ The MenuBar component provides a responsive navigation interface for your applic
* **Quad Color Bar:** A decorative vertical bar split into four colors, enhancing the visual design.

![MenuBar Section Demo](public/assets/menu-bar.gif)
<img src="public/assets/mobile-menu.gif" height="500">
<img src="public/assets/Mobile-Menu-Bar.gif" height="500">

The home page/dash is where a user can see there weekly report.

Expand Down
1 change: 0 additions & 1 deletion cypress/e2e/UserRegistration.spec.cy.js
View file
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
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ 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...")
});
})

Expand Down
30 changes: 15 additions & 15 deletions cypress/e2e/menuBarSpec.cy.js
View file
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
Binary file added public/assets/Mobile-Menu-Bar.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
258 changes: 134 additions & 124 deletions src/components/layout/MenuBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,135 +30,145 @@ 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>
? "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-[5vw] mt-3 text-cyan-300 "
: "ml-[5vw] mt-3 text-white transform scale-100 ";

{/* 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>

{/* -- 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"/>
return (
<div className='flex h-screen'>
{/* // Menu */}
<nav className='hidden sm:flex flex-col justify-items-center justify-evenly h-screen ml-5 mr-4 w-28'>
{/* 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 transition-transform duration-150"
: "m-auto mt-[15vh] rounded-full bg-blue-300 text-gray-500 transform scale-100 transition-transform duration-150"
} 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>
{/* -- MOBILE SLIDE-OUT MENU, shown on small screens only -- */}

{/* -- 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"/>
</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 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")}>
<button aria-hidden="false" className="min-sm:hidden m-4 text-white" 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="block text-center my-4 cursor-pointer" to="/">
<img className="mx-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-[5vw] 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-[5vw] 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>
</nav>

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

0 comments on commit 0c76c7b

Please sign in to comment.