The following page shows the global navigation and command bar navigation.
Below is a preview and a snippet of the navigation bar that is to be used on AtlasNet applications. The user’s full name is expected to be displayed.
A full page example is available here.
<div class="navbar-fixed-top">
<!-- Global Navigation -->
<nav id="navigation" class="navbar navbar-static-top navbar-short navbar-inverse" runat="server">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-user" style="color: white;"></span>
</button>
<a class="navbar-brand">
<div class="navbar-brand-name">
<img class="brand-img" src="<%= ResolveUrl("~/images/atlasnet-white.png")%>" />
<asp:Label runat="server" ID="lblApp"></asp:Label>
</div>
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="tooltip-bottom" title="User Profile">
<a href="<%= ResolveUrl("~/Preferences.aspx")%>">
<asp:Label ID="lblFullName" runat="server"></asp:Label></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Global Navigation -->
<!-- Commands Navbar -->
<nav class="navbar navbar-center navbar-static-top navbar-default" runat="server" id="navCommands">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#commands" aria-expanded="false" aria-controls="commands">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="commands" class="navbar-collapse collapse">
<asp:ContentPlaceHolder ID="CommandContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</nav>
<!-- End Commands Navbar -->
</div>