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

Help Improve Refactor #165

Open
wants to merge 9 commits into
base: dev
Choose a base branch
from
Open

Help Improve Refactor #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c12e30a
refactor: update header component styling and structure to be in-line…
collinschreyer-dev Jan 14, 2025
52fffd7
Refactor: Update solicitation report to align with UI team's recommen…
collinschreyer-dev Jan 15, 2025
1b7204f
Refactor: Update solicitation details page to align with UI team's fe…
collinschreyer-dev Jan 15, 2025
ebfa5f7
Updated help-us-improve files to align with UI team's recommendations.
collinschreyer-dev Jan 16, 2025
d809eb8
adjusted to better fit uswds styling
collinschreyer-dev Jan 16, 2025
e8a7ed6
Merge branch 'dev' into help-improve-refactor
collinschreyer-dev Jan 16, 2025
b42cb54
Commit to address all comments from previous and current PRs
collinschreyer-dev Jan 22, 2025
4ec7d6c
Merge branch 'help-improve-refactor' of https://github.com/GSA/srt-ui…
collinschreyer-dev Jan 22, 2025
5b984e3
Commit to address all comments from previous and current PRs
collinschreyer-dev Jan 22, 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
79 changes: 28 additions & 51 deletions src/app/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,67 +4,44 @@
<div class="usa-header usa-header--basic">
<div class="grid-container-widescreen">
<nav class="usa-nav" role="navigation" aria-label="main navigation">
<!-- Left Side: SRT Logo -->
<!-- Left Side: Logo Group -->
<div class="logo-container">
<a [routerLink]="['/home']" aria-label="SRT Home Page">
<img src="../../assets/srtlogo.png" alt="SRT Logo" height="40">
</a>
<img src="../../assets/gsa-logo.png" alt="GSA Logo" aria-label="GSA Logo" class="gsa-logo-img">
<img src="../../assets/srtlogo.png" alt="SRT Logo" class="srt-logo-img">
</div>

<!-- Center: Main Navigation -->
<ul class="usa-nav__primary" *ngIf="isLogin">
<li class="usa-nav__primary-item">
<a [routerLink]="['/home']" class="usa-nav__link" [class.usa-current]="GetHash('home')"
(click)="menuClick('/home')">Home</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/solicitation/report']" class="usa-nav__link"
[class.usa-current]="GetHash('solicitation')"
(click)="menuClick('/solicitation/report')">Solicitations</a>
<!-- Right Side: Navigation -->
<ul class="right-nav-group">
<li class="nav-item">
<a [routerLink]="['/home']" class="nav-link" (click)="menuClick('/home')">Home</a>
</li>
<li class="usa-nav__primary-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/analytics']" class="usa-nav__link" [class.usa-current]="GetHash('analytics')"
(click)="menuClick('/analytics')" id="nav-analytics">Analytics</a>
<li class="nav-item">
<a [routerLink]="['/solicitation/report']" class="nav-link" (click)="menuClick('/solicitation/report')">Daily Report</a>
</li>
<li class="usa-nav__primary-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/admin']" class="usa-nav__link" [class.usa-current]="GetHash('admin')"
(click)="menuClick('/admin')" [attr.tabindex]="isGSAAdmin ? 0 : -1">Administration</a>
<!-- Admin-only navigation items -->
<li class="nav-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/analytics']" class="nav-link" id="nav-analytics" (click)="menuClick('/analytics')">Analytics</a>
</li>
<li class="usa-nav__primary-item">
<a href="https://app.buyaccessible.gov/" class="usa-nav__link" target="_blank"
rel="noopener noreferrer">Additional Resources</a>
<li class="nav-item" *ngIf="isGSAAdmin">
<a [routerLink]="['/admin']" class="nav-link" tabindex="{{ isGSAAdmin ? 0 : -1}}" (click)="menuClick('/admin')">Administration</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/help/contactus']" class="usa-nav__link"
[class.usa-current]="GetHash('contactus')"
(click)="menuClick('/help/contactus')">Contact Us</a>
<li class="nav-item">
<a [routerLink]="['/help/contactus']" class="nav-link" (click)="menuClick('/help/contactus')">Contact us</a>
</li>
<li class="usa-nav__primary-item">
<a [routerLink]="['/help/faq']" class="usa-nav__link" [class.usa-current]="GetHash('faq')"
(click)="menuClick('/help/faq')">FAQs</a>
<li class="nav-item">
<a href="https://app.buyaccessible.gov/" target="_blank" rel="noopener noreferrer" class="nav-link" (click)="menuClick('art-tool')">
ART tool
<svg class="external-link-icon" aria-hidden="true" width="14" height="14" viewBox="0 0 24 24">
<path d="M5 3c-1.093 0-2 .907-2 2v14c0 1.093.907 2 2 2h14c1.093 0 2-.907 2-2v-7h-2v7H5V5h7V3H5zm9 0v2h3.586l-9.293 9.293 1.414 1.414L19 6.414V10h2V3h-7z"/>
</svg>
</a>
</li>
</ul>

<!-- Right Side: User Menu and GSA Logo -->
<ul class="right-nav-group">
<li class="nav-item" *ngIf="isLogin">
<div class="user-menu">
<button class="usa-button usa-button--outline" type="button">
Hello, {{firstName}}
<svg class="usa-icon margin-left-05" aria-hidden="true" role="img">
<use xlink:href="/assets/img/sprite.svg#expand_more"></use>
</svg>
</button>
<ul class="usa-nav__submenu" role="menu">
<li role="none">
<a href="javascript:void(0)" (click)="onLogout()" (blur)="popUpMenuLostFocus()"
id="menu-logout" role="menuitem">Log Out</a>
</li>
</ul>
</div>
<li class="nav-item">
<a [routerLink]="['/help/faq']" class="nav-link" (click)="menuClick('/help/faq')">FAQs</a>
</li>
<li class="nav-item gsa-logo-item">
<img src="../../assets/gsa-logo.png" alt="GSA Logo" aria-label="GSA Logo" height="40">
<li class="nav-item">
<a href="javascript:void(0)" (click)="onLogout()" (blur)="popUpMenuLostFocus()"
class="nav-link" role="menuitem">Log Out</a>
</li>
</ul>
</nav>
Expand Down
207 changes: 52 additions & 155 deletions src/app/header/header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,216 +2,113 @@
#header {
width: 100%;
background-color: white;
position: sticky; /* Change from relative to sticky */
top: 0; /* Stick to the top */
z-index: 1000; /* Ensure header stays above other content */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for visual separation */
border-bottom: 0.0625rem solid #dfe1e2;
}

#header {
transition: box-shadow 0.3s ease;
}


.usa-header {
padding: 0.5rem 0;
padding: 0.75rem 0;
border-bottom: none;
}

.grid-container-widescreen {
max-width: 1400px;
max-width: 75rem;
margin: 0 auto;
padding: 0 1rem;
padding: 0 2rem;
}

/* Main Navigation Container */
/* Navigation Container */
.usa-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0;
flex-wrap: nowrap;
width: 100%;
}

/* Left Logo */
/* Logo Styling */
.logo-container {
flex-shrink: 0;
padding-right: 2rem;
}

.logo-container img {
height: 40px;
width: auto;
}

/* Center Navigation */
.usa-nav__primary {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
flex-grow: 1;
justify-content: center;
gap: 1rem;
}

.usa-nav__primary-item {
margin: 0;
}

.usa-nav__link {
color: #1b1b1b;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}

.usa-nav__link:hover {
color: #005ea2;
}
.gsa-logo-img {
height: 3.125rem;
width: auto;
}

.usa-current {
color: #005ea2;
font-weight: bold;
.srt-logo-img {
height: 2rem;
width: auto;
}
}

/* Right Side Navigation Group */
/* Navigation Links */
.right-nav-group {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
margin-left: auto;
}

.right-nav-group .nav-item {
display: flex;
align-items: center;
}

.gsa-logo-item {
margin-left: 1rem;
gap: 1.5rem;
}

.gsa-logo-item img {
height: 40px;
width: auto;
}

/* User Menu */
.user-menu {
position: relative;
}

.usa-button.usa-button--outline {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: transparent;
border: 1px solid #ffffff;
color: #005ea2;
font-weight: normal;
.nav-item {
margin: 0;
white-space: nowrap;
box-shadow: none; /* Remove box shadow */
}

.usa-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 0.5rem;
}

/* Dropdown Menu */
.usa-nav__submenu {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #dfe1e2;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-width: 150px;
display: block;
visibility: hidden; /* Hide initially */
opacity: 0;
z-index: 1000;
margin-top: 0.25rem;
padding: 0.5rem 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Keep submenu visible briefly after mouse leaves button */
.user-menu:hover .usa-nav__submenu,
.usa-nav__submenu:hover {
visibility: visible;
opacity: 1;
transition-delay: 0s; /* Show immediately */
}

.user-menu:hover .usa-nav__submenu {
transition-delay: 0s, 0.2s; /* 200ms delay for hiding */
}

.usa-nav__submenu a {
color: #1b1b1b;
.nav-link {
color: #71767a;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
font-size: 0.9rem;
display: inline-flex;
align-items: center;

.usa-nav__submenu a:hover {
background-color: #f0f0f0;
&:hover {
color: #1a4480;
}
}

/* Skip Nav */
/* Skip Nav (maintaining accessibility) */
.usa-skipnav {
position: absolute;
left: -999em;
padding: 0.5rem 1rem;
background-color: white;
z-index: 1000;
}

.usa-skipnav:focus {
left: 0;
&:focus {
left: 0;
}
}

/* Border Bottom */
.border-bottom {
border-bottom: 1px solid #dfe1e2;
/* External link icon styling */
.external-link-icon {
margin-left: 0.25rem;
fill: currentColor;
vertical-align: middle;
display: inline-block;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
.usa-nav__primary {
gap: 0.5rem;
}

.usa-nav__link {
padding: 0.5rem;
}
.grid-container-widescreen {
width: 100%;
max-width: 100vh;
margin: 0 auto;
padding: 0 1rem;
}

@media (max-width: 768px) {
.usa-nav {
flex-wrap: wrap;
}

.usa-nav__primary {
order: 3;
width: 100%;
margin-top: 1rem;
flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 48rem) {
.right-nav-group {
order: 2;
gap: 1rem;
}

.logo-container {
order: 1;
.gsa-logo-img {
height: 2.5rem;
}

.srt-logo-img {
height: 1.5rem;
}
}
}
Loading