Skip to content

Commit

Permalink
modified navigation styles for better mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@kortirso
kortirso committed Feb 7, 2024
1 parent bafaea1 commit 9e5535e
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 35 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).

## Unreleased
### Modified
- navigation styles for better mobile

## [1.1.6] - 2024-02-06
### Added
- google auth
Expand Down
6 changes: 5 additions & 1 deletion app/assets/stylesheets/application.tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
}

.user-navigation-link {
@apply flex flex-row items-center p-2 pl-2 lg:pl-4 text-white;
@apply flex flex-row items-center p-2 pl-4 text-white;
}

.user-navigation-link img {
Expand Down Expand Up @@ -426,4 +426,8 @@
.player-info-alert {
@apply player-info bg-orange-700 hover:bg-orange-800 border border-orange-800 text-white;
}

.navigation-menu:not(.hidden) {
@apply absolute w-full z-10 bg-stone-700 top-14;
}
}
8 changes: 8 additions & 0 deletions app/javascript/application.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,12 @@ document.addEventListener('DOMContentLoaded', () => {
);
}
});

// mobile navigation toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', () => {
document.querySelector('.navigation-menu').classList.toggle('hidden');
});
};
});
77 changes: 43 additions & 34 deletions app/views/components/page_wrappers/page_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,52 @@
<div class="flex flex-col lg:flex-row flex-1 max-h-screen">
<div class="w-full lg:w-64 bg-stone-700 flex flex-col px-4 text-lg">
<div class="flex-1">
<section class="flex flex-col">
<%= link_to t('components.views.shared.fantasy_team_navigation_component.home'), home_path, class: 'p-4 mt-2 text-xl text-white' %>
<nav>
<div class="relative h-full lg:w-64 bg-stone-700 flex flex-col justify-between text-lg">
<section class="flex flex-row justify-between px-4">
<%= link_to t('components.views.shared.fantasy_team_navigation_component.home'), home_path, class: 'p-4 text-xl text-white' %>
<div class="lg:hidden flex items-center">
<button type="button" class="mobile-menu-button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#fff" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
</svg>
</button>
</div>
</section>
<% if @fantasy_team&.completed? %>
<section class="flex flex-wrap lg:flex-col px-4 lg:px-0 mb-4 lg:mb-0 mt-0 lg:mt-4">
<h2 class="hidden lg:block p-4 pl-4 text-xl text-white m-0">
<%= @fantasy_team.name %>
</h2>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.points'), fantasy_team_points_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_points_path(@fantasy_team.uuid))}" %>
<% if @fantasy_team.user_id == Current.user.id %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.team'), fantasy_team_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_path(@fantasy_team.uuid))}" %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.transfers'), fantasy_team_transfers_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_transfers_path(@fantasy_team.uuid))}" %>
<div class="navigation-menu flex-1 hidden lg:flex flex-col px-4">
<% if @fantasy_team&.completed? %>
<section class="flex-1 flex flex-wrap flex-col mb-4 lg:mb-0">
<h2 class="p-4 pl-4 text-xl text-white m-0">
<%= @fantasy_team.name %>
</h2>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.points'), fantasy_team_points_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_points_path(@fantasy_team.uuid))}" %>
<% if @fantasy_team.user_id == Current.user.id %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.team'), fantasy_team_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_path(@fantasy_team.uuid))}" %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.transfers'), fantasy_team_transfers_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_transfers_path(@fantasy_team.uuid))}" %>
<% end %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.status'), fantasy_team_status_index_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_status_index_path(@fantasy_team.uuid))}" %>
</section>
<% else %>
<div class="flex-1 hidden lg:flex"></div>
<% end %>
<section class="flex flex-wrap flex-col">
<%= link_to t('components.views.shared.fantasy_team_navigation_component.profile'), profile_path, class: "user-navigation-link #{'active' if current_page?(profile_path)}" %>
<%= link_to profile_achievements_path, class: "user-navigation-link #{'active' if current_page?(profile_achievements_path)}" do %>
<%= t('components.views.shared.profile_navigation_component.achievements') %>
<% if @unread_achievements_count.positive? %>
(<%= @unread_achievements_count %>)
<% end %>
<% end %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.status'), fantasy_team_status_index_path(@fantasy_team.uuid), class: "user-navigation-link #{'active' if current_page?(fantasy_team_status_index_path(@fantasy_team.uuid))}" %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.rules'), rules_path, class: "user-navigation-link #{'active' if current_page?(rules_path)}" %>
<%= react_component 'FeedbackForm' %>
<%= link_to t('components.views.shared.navigation_component.logout'), users_logout_path, class: 'user-navigation-link' %>
</section>
<% end %>
</div>
<div>
<section class="flex flex-wrap lg:flex-col px-4 lg:px-0">
<%= link_to t('components.views.shared.fantasy_team_navigation_component.profile'), profile_path, class: "user-navigation-link #{'active' if current_page?(profile_path)}" %>
<%= link_to profile_achievements_path, class: "user-navigation-link #{'active' if current_page?(profile_achievements_path)}" do %>
<%= t('components.views.shared.profile_navigation_component.achievements') %>
<% if @unread_achievements_count.positive? %>
(<%= @unread_achievements_count %>)
<section class="flex items-end pl-4">
<% I18n.available_locales.each do |locale| %>
<%= link_to locale, change_locale(locale), aria: { label: t('components.views.shared.navigation_component.change_locale') }, class: 'text-white px-2 py-4' %>
<% end %>
<% end %>
<%= link_to t('components.views.shared.fantasy_team_navigation_component.rules'), rules_path, class: "user-navigation-link #{'active' if current_page?(rules_path)}" %>
<%= react_component 'FeedbackForm' %>
<%= link_to t('components.views.shared.navigation_component.logout'), users_logout_path, class: 'user-navigation-link' %>
</section>
<section class="flex items-end pl-4">
<% I18n.available_locales.each do |locale| %>
<%= link_to locale, change_locale(locale), aria: { label: t('components.views.shared.navigation_component.change_locale') }, class: 'text-white px-2 py-4' %>
<% end %>
</section>
</section>
</div>
</div>
</div>
</nav>
<div class="flex-1 w-full p-4 sm:p-8 lg:p-12 lg:overflow-y-scroll bg-white">
<%= content %>
</div>
Expand Down

0 comments on commit 9e5535e

Please sign in to comment.