WilliamsSonoma sub navigation changes.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,307 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
{% if current_person.signed_in? %}
|
||||
<div
|
||||
class="np-hidden-desktop custom-hamburger-btn-container"
|
||||
id="nav-profile-btn"
|
||||
onclick="toggleSidemenu('nav-profile')">
|
||||
<button class="closed-btn">
|
||||
<img alt="{{ current_person.name }}" src="{{ current_person.avatar_url }}" />
|
||||
</button>
|
||||
<button class="fas fa-times np-hidden open-btn"></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<div
|
||||
class="np-hidden-desktop custom-hamburger-btn-container"
|
||||
id="nav-hamburger-btn"
|
||||
onclick="toggleSidemenu('nav-hamburger')">
|
||||
<button class="closed-btn fas fa-bars"></button>
|
||||
<button class="fas fa-times np-hidden open-btn"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}">
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
|
||||
{% t.transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}">
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden" id="nav-profile">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}" />
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="#"
|
||||
">
|
||||
<span class="lang-en">Certificates</span>
|
||||
<span class="lang-es">Certificados</span>
|
||||
</a>
|
||||
{% include "language_selector" %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="#"
|
||||
">
|
||||
<span class="lang-en">Profile settings</span>
|
||||
<span class="lang-es">Configuración del perfil</span>
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
<span class="lang-en">Sign out</span>
|
||||
<span class="lang-es">Cerrar sesión</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden" id="nav-hamburger">
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="np-header-search-input lang-en"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="np-header-search-input lang-es"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
<a href="/app/dashboard" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">For You</span>
|
||||
<span class="lang-es">Para Ti</span>
|
||||
</a>
|
||||
<a href="/app" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
</a>
|
||||
<a href="/app/catalog" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">All Lessons</span>
|
||||
<span class="lang-es">Todas las Lecciones</span>
|
||||
</a>
|
||||
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">All Paths</span>
|
||||
<span class="lang-es">Todas las Rutas</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.np-header-search-mobile-always {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.np-header-search-mobile-always {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 18px 0 12px;
|
||||
|
||||
background: {
|
||||
{
|
||||
color_palette.header_color
|
||||
}
|
||||
};
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always form {
|
||||
width: 90vw;
|
||||
max-width: 350px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always .np-header-search-input {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #d3d3d3;
|
||||
background: #fff;
|
||||
color: #1a3c2c;
|
||||
font-size: 18px;
|
||||
padding: 10px 40px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always .np-header-search-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #b0b0b0;
|
||||
font-size: 22px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-hamburger-btn-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.custom-hamburger-btn-container > button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 26px;
|
||||
}
|
||||
.custom-hamburger-btn-container > button > img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.np-header-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nav-hamburger-btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.np-header-search {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function toggleSidemenu(id){
|
||||
const button = document.getElementById(`${id}-btn`);
|
||||
const menu = document.getElementById(id);
|
||||
const hiddenClass = 'np-hidden';
|
||||
const menuClosed = menu.classList.contains(hiddenClass);
|
||||
closeMenus(hiddenClass)
|
||||
if(menuClosed){
|
||||
menu.classList.toggle(hiddenClass);
|
||||
Array.from(button.children).forEach(element => {
|
||||
element.classList.toggle(hiddenClass)
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closeMenus(hiddenClassName){
|
||||
for(const buttons of document.getElementsByClassName('custom-hamburger-btn-container')){
|
||||
const menuOpenedBtn = buttons.querySelector('.open-btn');
|
||||
if(!menuOpenedBtn.classList.contains(hiddenClassName)){
|
||||
menuOpenedBtn.classList.add(hiddenClassName);
|
||||
buttons.querySelector('.closed-btn').classList.remove(hiddenClassName);
|
||||
}
|
||||
}
|
||||
for(const menu of document.getElementsByClassName('np-header-mobile-menu-content')){
|
||||
if(!menu.classList.contains(hiddenClassName)){
|
||||
menu.classList.add(hiddenClassName)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user