Navigation - login dropdown

User is not logged in
<div class="navigation container">
<div class="row">
<input type="checkbox" id="nav-trigger-home" />
<label class="nav-trigger" for="nav-trigger-home">
<svg class="open-icon" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-hamburguer" fill="currentColor">
<rect id="rectangle-03" x="0" y="0" width="20" height="2"></rect>
<rect id="rectangle-02" x="0" y="5" width="20" height="2"></rect>
<rect id="rectangle-01" x="0" y="10" width="20" height="2"></rect>
</g>
</svg>
<svg class="close-icon" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-cross" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M5.59597747,6.61789673 L1,2.0219017 L2.02195371,1 L6.61788827,5.59597552 L11.213817,1 L12.2350947,2.0215377 L7.6392066,6.61730295 L12.2357837,11.213921 L11.213882,12.2358227 L6.61727954,7.63920269 L2.0212777,12.2350817 L1,11.213921 L5.59597747,6.61789673 Z" id="cross" stroke="#000000" fill="#000000"></path>
</g>
</svg>
</label>
<div class="nav-brand col-lg-2">
<a href="/">
<img class="navigation-logo" src="/static/images/the-embassy-logo-white.png" />
</a>
</div>
<div class="nav col-lg-7">
<a href="/pages/home" class="is-active">Home</a>
<a href="/pages/themes">Themes</a>
<a href="/pages/resource">Resources</a>
<a href="#">Discussions</a>
<a href="/pages/trainings">Training</a>
<a href="/pages/about">About</a>
</div>
<div class="nav-search-profile col-lg-3">
<div id="p-search" class="p-search" role="search">
<form id="searchform" class="mw-search" action="/wiki-wiki/index.php">
<input type="hidden" name="title" value=" Special:Search">
<div class="input-group">
<input name="search" placeholder="Search wiki" title="Search wiki [ctrl-option-f]" accesskey="f" id="searchInput" class="form-control" autocomplete="off">
<div class="input-group-append">
<button value="Go" id="searchGoButton" name="go" type="submit" class="go-btn searchGoButton" aria-label="Go to page" title="Go to a page with this exact name if it exists"></button>
<button value="Search" id="mw-searchButton" name="fulltext" type="submit" class="search-btn mw-searchButton" aria-label="Go to page" title="Search the pages for this text"></button>
</div>
</div>
</form>
</div>












<button class="search-trigger">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18">
<path fill="currentColor" fill-rule="evenodd" d="M15.3912 16.1264l-3.328-4.1323h.0002l-1.1031-1.37c-.9708 1.0635-2.365 1.7225-3.9045 1.7225a5.445 5.445 0 01-.577-.031c-1.4071-.1519-2.671-.8426-3.5588-1.945-.8876-1.1024-1.293-2.4844-1.1411-3.8916.2908-2.6975 2.552-4.7315 5.2597-4.7315.191 0 .3852.0107.5767.0315 2.905.313 5.0136 2.9314 4.7002 5.8364-.047.4364-.1507.853-.2945 1.249l1.4822 1.0062a7.0388 7.0388 0 00.55-2.0678c.417-3.8693-2.3813-7.3441-6.2503-7.7614a7.1198 7.1198 0 00-.7643-.0415C3.4858-.0001.4309 2.679.0413 6.2916c-.4174 3.869 2.381 7.3443 6.2502 7.7616.2568.0275.512.041.7643.041 1.342 0 2.612-.3835 3.6948-1.0543l3.839 4.7668.0002-.0004v.0004h4.2999v-1.6803h-3.4985z"/>
</svg>
</button>



<div class="profile" data-dropdown-trigger>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 21">
<g fill="currentColor" fill-rule="evenodd">
<path d="M2.9715 20.6666H0v-1.5803h1.7937l1.4382-4.8212c.2371-.795.9818-1.3497 1.811-1.3497h8.1329c.829 0 1.5739.5547 1.811 1.3494l1.7805 5.94-1.5139.4536-1.7807-5.9406a.3119.3119 0 00-.297-.222H5.043a.3117.3117 0 00-.2967.2212l-1.7747 5.9496zM8.9776 11.4083c-3.091 0-5.6057-2.5148-5.6057-5.6057 0-.5997.0942-1.19.2802-1.7552l1.501.4946a4.0253 4.0253 0 00-.2009 1.2606c0 2.2197 1.8057 4.0254 4.0254 4.0254 2.2196 0 4.0253-1.8057 4.0253-4.0254 0-2.2196-1.8057-4.0255-4.0253-4.0255H4.8659V.1965h4.1117c3.0909 0 5.6057 2.515 5.6057 5.6061 0 3.091-2.5148 5.6057-5.6057 5.6057"/>
</g>
</svg>

<div class="te-dropdown-menu">
<a href="/wiki/Special:UserLogin"><span>Login</span></a>
<a href="/wiki/Special:UserSignup"><span>Sign up</span></a>
</div>
</div>


</div>
</div>
</div>
User in user
<div class="navigation container">
<div class="row">
<input type="checkbox" id="nav-trigger-home" />
<label class="nav-trigger" for="nav-trigger-home">
<svg class="open-icon" viewBox="0 0 20 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-hamburguer" fill="currentColor">
<rect id="rectangle-03" x="0" y="0" width="20" height="2"></rect>
<rect id="rectangle-02" x="0" y="5" width="20" height="2"></rect>
<rect id="rectangle-01" x="0" y="10" width="20" height="2"></rect>
</g>
</svg>
<svg class="close-icon" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon-cross" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M5.59597747,6.61789673 L1,2.0219017 L2.02195371,1 L6.61788827,5.59597552 L11.213817,1 L12.2350947,2.0215377 L7.6392066,6.61730295 L12.2357837,11.213921 L11.213882,12.2358227 L6.61727954,7.63920269 L2.0212777,12.2350817 L1,11.213921 L5.59597747,6.61789673 Z" id="cross" stroke="#000000" fill="#000000"></path>
</g>
</svg>
</label>
<div class="nav-brand col-lg-2">
<a href="/">
<img class="navigation-logo" src="/static/images/the-embassy-logo-white.png" />
</a>
</div>
<div class="nav col-lg-7">
<a href="/pages/home" class="is-active">Home</a>
<a href="/pages/themes">Themes</a>
<a href="/pages/resource">Resources</a>
<a href="#">Discussions</a>
<a href="/pages/trainings">Training</a>
<a href="/pages/about">About</a>
</div>
<div class="nav-search-profile col-lg-3">
<div id="p-search" class="p-search" role="search">
<form id="searchform" class="mw-search" action="/wiki-wiki/index.php">
<input type="hidden" name="title" value=" Special:Search">
<div class="input-group">
<input name="search" placeholder="Search wiki" title="Search wiki [ctrl-option-f]" accesskey="f" id="searchInput" class="form-control" autocomplete="off">
<div class="input-group-append">
<button value="Go" id="searchGoButton" name="go" type="submit" class="go-btn searchGoButton" aria-label="Go to page" title="Go to a page with this exact name if it exists"></button>
<button value="Search" id="mw-searchButton" name="fulltext" type="submit" class="search-btn mw-searchButton" aria-label="Go to page" title="Search the pages for this text"></button>
</div>
</div>
</form>
</div>












<button class="search-trigger">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 18">
<path fill="currentColor" fill-rule="evenodd" d="M15.3912 16.1264l-3.328-4.1323h.0002l-1.1031-1.37c-.9708 1.0635-2.365 1.7225-3.9045 1.7225a5.445 5.445 0 01-.577-.031c-1.4071-.1519-2.671-.8426-3.5588-1.945-.8876-1.1024-1.293-2.4844-1.1411-3.8916.2908-2.6975 2.552-4.7315 5.2597-4.7315.191 0 .3852.0107.5767.0315 2.905.313 5.0136 2.9314 4.7002 5.8364-.047.4364-.1507.853-.2945 1.249l1.4822 1.0062a7.0388 7.0388 0 00.55-2.0678c.417-3.8693-2.3813-7.3441-6.2503-7.7614a7.1198 7.1198 0 00-.7643-.0415C3.4858-.0001.4309 2.679.0413 6.2916c-.4174 3.869 2.381 7.3443 6.2502 7.7616.2568.0275.512.041.7643.041 1.342 0 2.612-.3835 3.6948-1.0543l3.839 4.7668.0002-.0004v.0004h4.2999v-1.6803h-3.4985z"/>
</svg>
</button>



<div class="profile" data-dropdown-trigger>
<span class="profile-initials">R</span>

<div class="te-dropdown-menu">
<a href="#profile-page"><span>Ruben Nascimento</span></a>
<a href="#logout"><span>Logout</span></a>
</div>
</div>


</div>
</div>
</div>