Skip to content

Commit d005005

Browse files
author
Lewis Youl
committed
feat: add mobile menu
1 parent db3208b commit d005005

File tree

7 files changed

+48
-5
lines changed

7 files changed

+48
-5
lines changed

‎app/javascript/controllers/navbar_controller.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Controller } from 'stimulus';
2+
3+
export default class extends Controller {
4+
static targets = ['container']
5+
6+
toggle() {
7+
console.log('togglin')
8+
this.containerTarget.classList.toggle('hidden')
9+
}
10+
}

‎app/views/shared/_folder.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
data-folders-target="folder"
66
data-folder-id="<%= folder.id %>"
77
>
8-
<%= render partial: 'shared/icons/folder', locals: { color: 'text-gray-200', width: 10, height: 10 } %>
8+
<%= render partial: 'shared/icons/folder', locals: { color: 'text-gray-200 m-auto', width: 10, height: 10 } %>
99
<div>
1010
<h5 class="text-center"><%= folder.name %></h5>
1111
<%= render partial: 'folders/counts', locals: { folder: folder } %>

‎app/views/shared/_mobile_menu.html.erb‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="md:hidden flex items-center justify-end mr-4" data-controller="navbar">
2+
<div data-action="click->navbar#toggle">
3+
<%= render partial: 'shared/icons/menu.html.erb', locals: { classes: 'w-6 h-6 text-cyan' } %>
4+
</div>
5+
<div class="absolute hidden md:hidden top-14 bg-white rounded-sm shadow-xl" id="mobile-menu" data-navbar-target="container">
6+
<div class="space-y-3 py-3">
7+
<%= link_to folders_path, class: 'flex items-center px-4' do %>
8+
<%= render partial: 'shared/icons/home', locals: { width: 5 , height: 5, color: "#{request.path == root_path ? 'text-cyan' : 'text-gray-400'} mr-2" } %>
9+
<span>Feed</span>
10+
<% end %>
11+
<%= link_to folders_path, class: 'flex items-center px-4' do %>
12+
<%= render partial: 'shared/icons/folder', locals: { width: 5 , height: 5, color: "#{request.path == folders_path ? 'text-cyan' : 'text-gray-400'} mr-2" } %>
13+
<span>Folders</span>
14+
<% end %>
15+
<%= link_to snippets_path, class: 'flex items-center px-4' do %>
16+
<%= render partial: 'shared/icons/snippet', locals: { width: 5 , height: 5, color: "#{request.path == snippets_path ? 'text-cyan' : 'text-gray-400'} mr-2" } %>
17+
<span>Snippets</span>
18+
<% end %>
19+
<%= link_to notifications_path, class: 'flex items-center px-4' do %>
20+
<%= render partial: 'shared/icons/bell', locals: { width: 5 , height: 5, color: "#{request.path == notifications_path ? 'text-cyan' : 'text-gray-400'} mr-2" } %>
21+
<span>Notifications</span>
22+
<% end %>
23+
<%= link_to connect_path, class: 'flex items-center px-4' do %>
24+
<%= render partial: 'shared/icons/connect', locals: { width: 5 , height: 5, color: "#{request.path == connect_path ? 'text-cyan' : 'text-gray-400'} mr-2" } %>
25+
<span>Connect</span>
26+
<% end %>
27+
</div>
28+
</div>
29+
</div>

‎app/views/shared/_nav_item.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<% css_class = active ? 'active' : 'inactive' %>
55

66
<%= link_to(path, class: 'relative px-3', data: { controller: 'tooltip', action: 'mouseenter->tooltip#display mouseleave->tooltip#hide' }) do %>
7-
<%= render partial: "shared/icons/#{icon}", locals: { width: 7, height: 7, color: color } %>
7+
<%= render partial: "shared/icons/#{icon}", locals: { width: 7, height: 7, color: "m-auto #{color}" } %>
88
<% if path == notifications_path %>
99
<%= notification_counter(current_user) %>
1010
<% end %>

‎app/views/shared/_topbar.html.erb‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<% end %>
88
</div>
99

10-
<div class="flex items-center relative">
10+
<div class="hidden md:flex items-center relative">
1111
<% if user_signed_in? %>
1212
<%= render partial: 'shared/nav_item', locals: { path: root_path, page_title: 'Feed', icon: 'home' } %>
1313
<%= render partial: 'shared/nav_item', locals: { path: folders_path, page_title: 'Folders', icon: 'folder' } %>
@@ -24,9 +24,10 @@
2424
</div>
2525
2626
<% if user_signed_in? %>
27-
<div class="flex items-center flex-1 justify-end">
27+
<div class="hidden md:flex items-center flex-1 justify-end">
2828
<%= render partial: 'shared/profile_nav_item.html.erb' %>
2929
</div>
30+
<%= render partial: 'shared/mobile_menu' %>
3031
<% else %>
3132
<div class="flex flex-1 justify-end items-center">
3233
<%= button_tag('LOG IN', type: :button, class: "flex justify-center button--cta-tertiary", data: { controller: "modal", modal_url_value: sign_in_modals_users_path, action: "click->modal#present" }) %>

‎app/views/shared/icons/_folder.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<svg class="m-auto w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
1+
<svg class="w-<%= width %> h-<%= height %> <%= color %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
22
<path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path>
33
</svg>

‎app/views/shared/icons/_menu.html.erb‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg class="<%= classes %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2+
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
3+
</svg>

0 commit comments

Comments
 (0)