118 lines
6.0 KiB
Plaintext
118 lines
6.0 KiB
Plaintext
<nav class="sub-navigation">
|
|
<div class="np-sub-navigation-content">
|
|
<div class="np-sub-navigation-content-item">
|
|
<a class="np-sub-navigation-content-item-link" id="home" href="/app">
|
|
<span class="sub-nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
|
<defs>
|
|
<clipPath id="clip-Dashboard">
|
|
<rect width="50" height="40"/>
|
|
</clipPath>
|
|
</defs>
|
|
<g id="Dashboard" clip-path="url(#clip-Dashboard)">
|
|
<g id="Group_6184" data-name="Group 6184" transform="translate(-106.996 -67)">
|
|
<rect id="Rectangle_5152" data-name="Rectangle 5152" width="50" height="40" transform="translate(106.996 67)" fill="none"/>
|
|
<path id="home" d="M16.778,34.5V22.955h6.788V34.5h8.485V20.8h3.18v-3.48L20.172,4.5,5.228,17.321V20.8H8.293V34.5Z" transform="translate(111.769 67.5)" fill="none" stroke="#4b91aa" stroke-linecap="square" stroke-linejoin="round" stroke-width="2"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
Home
|
|
</a>
|
|
</div>
|
|
<div class="np-sub-navigation-content-item">
|
|
<a class="np-sub-navigation-content-item-link" id='courses' href="/app/courses">
|
|
<span class="sub-nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
|
<defs>
|
|
<clipPath id="clip-Resources">
|
|
<rect width="50" height="40"/>
|
|
</clipPath>
|
|
</defs>
|
|
<g id="Resources" clip-path="url(#clip-Resources)">
|
|
<g id="Group_6186" data-name="Group 6186" transform="translate(-611.996 -58)">
|
|
<rect id="Rectangle_5153" data-name="Rectangle 5153" width="50" height="40" transform="translate(611.996 58)" fill="none"/>
|
|
<g id="Group_2" data-name="Group 2" transform="translate(612 62)">
|
|
<path id="Shape" d="M14.451,32h0L0,25.334V6.666L14.451,0,28.9,6.666V25.334L14.451,32ZM26.274,9.343,15.765,14.191V28.464l10.509-4.847Zm-23.647,0V23.617l10.51,4.847V14.191ZM14.451,2.93h0L4.759,7.4l9.692,4.47L24.139,7.4,14.451,2.93Z" transform="translate(0 0)" fill="#4b91aa"/>
|
|
<path id="Shape-2" data-name="Shape" d="M9.084,20.115h0L0,15.924V4.19L9.084,0l9.083,4.19V15.924L9.084,20.115Zm7.2-13.829L10.137,9.124v8.354l6.151-2.837Zm-14.409,0v8.354L8.03,17.478V9.124Zm7.2-4.3L3.3,4.652,9.084,7.321l5.785-2.669L9.084,1.983Z" transform="translate(31.833 0)" fill="#4b91aa"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</span>
|
|
Courses
|
|
</a>
|
|
</div>
|
|
<div class="np-sub-navigation-content-item">
|
|
<a class="np-sub-navigation-content-item-link" id='learning_paths' href="/app/learning_paths">
|
|
<span class="sub-nav-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="40" viewBox="0 0 50 40">
|
|
<defs>
|
|
<clipPath id="clip-Dynamic_Classroom">
|
|
<rect width="50" height="40"/>
|
|
</clipPath>
|
|
</defs>
|
|
<g id="Dynamic_Classroom" data-name="Dynamic Classroom" clip-path="url(#clip-Dynamic_Classroom)">
|
|
<g id="Group_6183" data-name="Group 6183" transform="translate(-168.996 -58)">
|
|
<rect id="Rectangle_5151" data-name="Rectangle 5151" width="50" height="40" transform="translate(168.996 58)" fill="none"/>
|
|
<g id="dynamic-classroom-blue-icon" transform="translate(173.615 8.285)">
|
|
<path id="Shape" d="M2.057,11.066a.7.7,0,0,0,.326-.571L2.256.813C2.251.365,1.746,0,1.122,0,.545,0,0,.39,0,.8l.127,9.683a.719.719,0,0,0,.335.573,1.468,1.468,0,0,0,1.595.006" transform="translate(10.912 69.293) rotate(49)" fill="#4b91aa"/>
|
|
<path id="Shape-2" data-name="Shape" d="M2.057,18.726a1.5,1.5,0,0,0,.326-.966L2.256,1.375A1.284,1.284,0,0,0,1.122,0,1.321,1.321,0,0,0,0,1.361L.127,17.747a1.529,1.529,0,0,0,.335.97,1,1,0,0,0,1.595.01" transform="translate(17.733 71.222) rotate(48)" fill="#4b91aa"/>
|
|
<path id="Shape-3" data-name="Shape" d="M11.859,26.789a1.2,1.2,0,0,1-.187-.015,1.186,1.186,0,0,1-.947-.822l-2.4-7.578L.829,15.947a1.2,1.2,0,0,1-.814-.961A1.21,1.21,0,0,1,.5,13.818L6.879,9.169l-.03-7.954A1.2,1.2,0,0,1,7.5.133a1.171,1.171,0,0,1,1.248.1l6.345,4.7,7.474-2.488a1.184,1.184,0,0,1,1.216.292,1.2,1.2,0,0,1,.291,1.232l-2.462,7.556,4.651,6.417a1.21,1.21,0,0,1,.1,1.262,1.229,1.229,0,0,1-1.041.657l-7.9-.03-4.6,6.454A1.191,1.191,0,0,1,11.859,26.789ZM9.244,3.6l.024,6.183a1.218,1.218,0,0,1-.5.984L3.81,14.378l5.825,1.888a1.206,1.206,0,0,1,.771.782l1.869,5.89,3.574-5.018a1.214,1.214,0,0,1,.91-.5l6.18.022-3.614-4.989a1.22,1.22,0,0,1-.171-1.091l1.912-5.872L15.257,7.423a1.184,1.184,0,0,1-1.079-.172L9.245,3.6Z" transform="translate(12.475 51.715)" fill="#4b91aa"/>
|
|
<path id="Shape-4" data-name="Shape" d="M2.057,11.066a.7.7,0,0,0,.326-.571L2.256.813C2.251.365,1.746,0,1.122,0,.545,0,0,.39,0,.8l.127,9.683a.719.719,0,0,0,.335.573,1.468,1.468,0,0,0,1.595.006" transform="translate(19.954 78.504) rotate(49)" fill="#4b91aa"/>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
|
|
</span>
|
|
Learning Paths
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<style>
|
|
.white-icon {
|
|
filter: invert(82%) sepia(100%) saturate(10%) hue-rotate(87deg) brightness(149%) contrast(119%);
|
|
}
|
|
.sub-navigation {
|
|
background: #fff;
|
|
padding: 0.8rem;
|
|
border-bottom: 3px solid rgb(0 0 0 / 20%);
|
|
}
|
|
.np-sub-navigation-content-item-link {
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
color: #515478;
|
|
padding: 25px 15px;
|
|
}
|
|
|
|
.active-link {
|
|
color: #fff;
|
|
background: #61759e;
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let url = window.location.href.split('/')[4];
|
|
|
|
switch(url) {
|
|
case 'learning_paths':
|
|
document.getElementById('learning_paths').classList.add('active-link');
|
|
document.getElementsByClassName("sub-nav-icon")[2].classList.add("white-icon");
|
|
break;
|
|
case 'courses':
|
|
document.getElementById('courses').classList.add('active-link')
|
|
document.getElementsByClassName("sub-nav-icon")[1].classList.add("white-icon");
|
|
break;
|
|
default:
|
|
document.getElementById('home').classList.add('active-link');
|
|
document.getElementsByClassName("sub-nav-icon")[0].classList.add("white-icon");
|
|
}
|
|
|
|
</script> |