Basic Navbar working
This commit is contained in:
Ethan Fraenkel
parent
3108fcbd15
commit
644b6cb411
|
|
@ -1,77 +1,59 @@
|
||||||
/* Main navbar */
|
.polyglot-navbar {
|
||||||
.navbar-wagon {
|
|
||||||
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
|
|
||||||
background: white;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
height: 70px;
|
|
||||||
padding: 0px 30px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
width: 100vw;
|
||||||
|
height: 3.5em;
|
||||||
|
background: $navbar-background;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
color: $primary;
|
||||||
|
margin-left: 1em;
|
||||||
|
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Logo */
|
|
||||||
.navbar-wagon-brand img {
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* User Avatar */
|
.right-align {
|
||||||
.navbar-wagon .avatar {
|
height: 100%;
|
||||||
height: 35px;
|
width: 16em;
|
||||||
width: 35px;
|
margin-right: 5em;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right section */
|
|
||||||
.navbar-wagon-right {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
height: inherit;
|
||||||
|
div {
|
||||||
|
height: inherit;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 5px solid transparent;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Basic navbar item */
|
&.active {
|
||||||
.navbar-wagon-item {
|
border-bottom: 5px solid $primary;
|
||||||
cursor: pointer;
|
color: white;
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Navbar link */
|
a {
|
||||||
.navbar-wagon-link {
|
color: white;
|
||||||
color: #616668;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
.navbar-wagon-link:hover {
|
}
|
||||||
color: #da552f;
|
a {
|
||||||
|
color: #C4C4C4;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Dropdown menu */
|
.profile {
|
||||||
.navbar-wagon-dropdown-menu {
|
img {
|
||||||
margin-top: 15px;
|
width: 3.25em;
|
||||||
box-shadow: 1px 1px 4px #E6E6E6;
|
|
||||||
border-color: #E6E6E6;
|
|
||||||
}
|
}
|
||||||
.navbar-wagon-dropdown-menu li > a {
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
font-weight: lighter !important;
|
|
||||||
color: #999999 !important;
|
|
||||||
font-size: 15px !important;
|
|
||||||
line-height: 22px !important;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
}
|
||||||
.navbar-wagon-dropdown-menu li > a:hover {
|
|
||||||
background: transparent !important;
|
|
||||||
color: black !important;
|
|
||||||
}
|
|
||||||
.navbar-wagon-dropdown-menu:before {
|
|
||||||
content: ' ';
|
|
||||||
height: 10px;
|
|
||||||
width: 10px;
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: -6px;
|
|
||||||
background-color: white;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
border-left: 1px solid #E6E6E6;
|
|
||||||
border-top: 1px solid #E6E6E6;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,15 @@
|
||||||
<div class="navbar-wagon">
|
<div class="polyglot-navbar">
|
||||||
<!-- Logo -->
|
<div class="logo">
|
||||||
<%= link_to root_path, class: "navbar-wagon-brand" do %>
|
Polyglot
|
||||||
<%= image_tag "logo.png", height: 50 %>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<!-- Right Navigation -->
|
|
||||||
<div class="navbar-wagon-right hidden-xs hidden-sm">
|
|
||||||
|
|
||||||
<% if user_signed_in? %>
|
|
||||||
|
|
||||||
<!-- Links when logged in -->
|
|
||||||
<%= link_to "Host", "#", class: "navbar-wagon-item navbar-wagon-link" %>
|
|
||||||
<%= link_to "Trips", "#", class: "navbar-wagon-item navbar-wagon-link" %>
|
|
||||||
<%= link_to "Messages", "#", class: "navbar-wagon-item navbar-wagon-link" %>
|
|
||||||
|
|
||||||
<!-- Avatar with dropdown menu -->
|
|
||||||
<div class="navbar-wagon-item">
|
|
||||||
<div class="dropdown">
|
|
||||||
<%= image_tag "http://kitt.lewagon.com/placeholder/users/ssaunier", class: "avatar dropdown-toggle", id: "navbar-wagon-menu", "data-toggle" => "dropdown" %>
|
|
||||||
<ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
|
|
||||||
<li>
|
|
||||||
<%= link_to "#" do %>
|
|
||||||
<i class="fa fa-user"></i> <%= t(".profile", default: "Profile") %>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= link_to "#" do %>
|
|
||||||
<i class="fa fa-cog"></i> <%= t(".settings", default: "Settings") %>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<%= link_to destroy_user_session_path, method: :delete do %>
|
|
||||||
<i class="fa fa-sign-out"></i> <%= t(".sign_out", default: "Log out") %>
|
|
||||||
<% end %>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% else %>
|
|
||||||
<!-- Login link (when logged out) -->
|
|
||||||
<%= link_to t(".sign_in", default: "Login"), new_user_session_path, class: "navbar-wagon-item navbar-wagon-link" %>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dropdown list appearing on mobile only -->
|
<div class="right-align">
|
||||||
<div class="navbar-wagon-item hidden-md hidden-lg">
|
<div class="links">
|
||||||
<div class="dropdown">
|
<div class="active"><%= link_to "Dashboard", "#" %></div>
|
||||||
<i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
|
<div><%= link_to "Settings", "#" %></div>
|
||||||
<ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
|
</div>
|
||||||
<li><a href="#">Some mobile link</a></li>
|
<div class="profile">
|
||||||
<li><a href="#">Other one</a></li>
|
<%= image_tag "https://avatars2.githubusercontent.com/u/38472180?v=4", class: "img-circle"%>
|
||||||
<li><a href="#">Other one</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue