Skip to content

Commit e9795ef

Browse files
author
Jeroen Gerits
committed
removed top-nav foundation and made a new one
1 parent 44094bb commit e9795ef

File tree

4 files changed

+136
-33
lines changed

4 files changed

+136
-33
lines changed

‎app/views/layouts/_top_nav.blade.php‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,34 @@
1-
<nav class="top-bar">
2-
<ul class="title-area">
3-
<!-- Title Area -->
4-
<li class="name">
5-
<h1><a href="{{ action('Controllers\HomeController@getIndex') }}"><img class="logo" src="/images/laravel-io-logo-small.png"></a></h1>
6-
</li>
7-
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
8-
<li class="toggle-topbar menu-icon">
9-
<a href="#"><span><!-- Menu --></span></a>
10-
</li>
11-
</ul><!-- Left Nav Section -->
12-
13-
<section class="top-bar-section">
14-
<ul class="left main-nav">
1+
<header class="top-navigation">
2+
<nav>
3+
<ul class="top-navigation-signin-mobile">
4+
@if(Auth::check())
5+
<li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s Dashboard</a></li>
6+
@else
7+
<li><a href="{{ action('Controllers\AuthController@getLogin') }}">Login with GitHub</a></li>
8+
@endif
9+
</ul>
10+
<div class="top-navigation-logo">
11+
<a href="{{ action('Controllers\HomeController@getIndex') }}">
12+
<img class="logo" src="/images/laravel-io-logo-small.png">
13+
</a>
14+
</div>
15+
<ul class="top-navigation-items">
1516
<li>
1617
<a href="{{ action('Controllers\ArticlesController@getIndex') }}">Articles</a>
1718
</li>
18-
1919
<li>
2020
<a href="{{ action('Controllers\ForumController@getIndex') }}">Forum</a>
2121
</li>
22-
2322
<li>
2423
<a href="{{ action('Controllers\ChatController@getIndex') }}">Chat</a>
25-
</li>
24+
</li>
2625
</ul>
27-
28-
<ul class="right login">
26+
<ul class="top-navigation-signin-desktop">
2927
@if(Auth::check())
30-
<li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s Dashboard</a></li>
28+
<li><a href="{{ action('Controllers\DashboardController@getIndex') }}">{{ Auth::user()->name }}'s <span class="dashboard-word">Dashboard</span></a></li>
3129
@else
3230
<li><a href="{{ action('Controllers\AuthController@getLogin') }}">Login with GitHub</a></li>
33-
@endif
34-
</ul>
35-
</section>
36-
</nav>
31+
@endif
32+
</ul>
33+
</nav>
34+
</header>

‎public/scss/_settings.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
$column: 70px;
66
$gutter: 30px;
77
$grid-columns: 12;
8-
$max-width: 1200px;
8+
$max-width: 100%;
99

1010
/* ==========================================================================
1111
Visual grid settings
1212
========================================================================== */
13-
$visual-grid: true;
13+
$visual-grid: false;
1414
$visual-grid-color: gray;
1515

1616
/* ==========================================================================

‎public/scss/app.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
========================================================================== */
2121
@import "vendor/foundation/global";
2222
@import "vendor/foundation/grid";
23-
@import "vendor/foundation/top-bar";
2423

2524
/* ==========================================================================
2625
Modules

‎public/scss/modules/_header.scss‎

Lines changed: 112 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,120 @@
11
/* ==========================================================================
2-
HEADER
2+
HEADER NAVIGATION
33
========================================================================== */
44

5-
header {
5+
// MOBILE STYLES ////////////////////////////////////////////////////////////
6+
7+
.top-navigation {
8+
@include outer-container;
9+
font-family: $helvetica;
610
background-color: $lioGrey;
7-
// padding: 100px 0;
8-
// border-bottom: 2px solid lighten($lioGrey, 20%);
9-
padding: 0 2em;
1011
position: relative;
1112
}
1213

14+
.top-navigation-logo {
15+
float:left;
16+
text-align: center;
17+
padding: 0.5rem 0 0.5rem 0.5rem;
18+
}
19+
20+
.top-navigation-items {
21+
float:left;
22+
margin: 2.25rem 0 0 0.25rem;
23+
list-style: none;
24+
text-transform: uppercase;
25+
letter-spacing: 0.09em;
26+
font-size:0.8rem;
27+
padding:0;
28+
li {
29+
display: inline-block;
30+
margin:0 0.5rem;
31+
a {
32+
color:#eee;
33+
text-decoration: none;
34+
&:hover {
35+
color: $lioRed;
36+
}
37+
}
38+
}
39+
}
40+
41+
.top-navigation-signin-desktop {
42+
display: none;
43+
}
44+
45+
.top-navigation-signin-mobile {
46+
text-align: center;
47+
list-style: none;
48+
margin:0;
49+
padding:0;
50+
background: darken($lioGrey, 10%);
51+
li {
52+
padding: 0.5rem 0;
53+
font-size:0.9rem;
54+
a {
55+
color:#bbb;
56+
text-decoration: none;
57+
&:hover {
58+
color: $lioRed;
59+
}
60+
}
61+
}
62+
}
63+
64+
65+
66+
// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////
67+
68+
@media only screen and (min-width: 480px) {
69+
70+
.top-navigation-signin-mobile {
71+
display: none;
72+
}
73+
.top-navigation-signin-desktop {
74+
display: inline-block;
75+
text-align: right;
76+
list-style: none;
77+
float:right;
78+
padding:0;
79+
margin: 1.75rem 1rem 0 0;
80+
font-size:0.8rem;
81+
li {
82+
padding: 0.5rem 0;
83+
font-size:0.9rem;
84+
a {
85+
color:#fff;
86+
text-decoration: none;
87+
&:hover {
88+
color: $lioRed;
89+
}
90+
}
91+
}
92+
}
93+
}
94+
.dashboard-word {
95+
display: none;
96+
}
97+
98+
// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////
99+
100+
@media only screen and (min-width: 768px) {
101+
.dashboard-word {
102+
display: inline-block;
103+
}
104+
}
105+
106+
// BREAKPOINT 3 (1280) ////////////////////////////////////////////////////////////
107+
108+
@media only screen and (min-width: 1280px) {
109+
110+
}
111+
112+
113+
114+
/*
115+
116+
117+
13118
.top-bar {
14119
padding-right: 30px;
15120
margin-bottom: 0;
@@ -36,4 +141,5 @@ header {
36141
a {
37142
color: #eee !important;
38143
}
39-
}
144+
}
145+
*/

0 commit comments

Comments
 (0)