Merge pull request #119 from motohiro-mm/feature/add_menu

ハンバーガーメニューを作成
motohiro-mm · Oct 11, 2024 · 40ceebc · 40ceebc
2 parents f8c18e6 + d14e21c
commit 40ceebc
Show file tree

Hide file tree

Showing 12 changed files with 5,372 additions and 158 deletions.
diff --git a/.erb-lint.yml b/.erb-lint.yml
@@ -1,6 +1,6 @@
 exclude:
-  - '**/vendor/**/*'
-  - '**/node_modules/**/*'
+  - "**/vendor/**/*"
+  - "**/node_modules/**/*"
 EnableDefaultLinters: true
 linters:
   Rubocop:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -2,9 +2,9 @@ name: CI
 
 on:
   pull_request:
-    branches: [ main ]
+    branches: [main]
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   test:

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -15,204 +15,200 @@
  */
 
 input:-webkit-autofill {
-    background-color: transparent !important;
-    color: inherit !important;
-    box-shadow: 0 0 0px 1000px white inset !important;
+  background-color: transparent !important;
+  color: inherit !important;
+  box-shadow: 0 0 0px 1000px white inset !important;
 }
 
 input:-webkit-autofill:focus {
-    background-color: white !important;
+  background-color: white !important;
 }
 
 .icon {
-    width: 30px;
-    height: 30px;
+  width: 30px;
+  height: 30px;
 }
 
 .remark_button {
-    border-radius: 9999px;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    font-weight: 700;
-    background-color: rgba(255, 237, 213, 0.7);
+  border-radius: 9999px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-weight: 700;
+  background-color: rgba(255, 237, 213, 0.7);
 }
 
-
 .plus_icon {
-    display: inline-block;
-    color: #ff9142;
-    font-size: 1.0rem;
-    font-weight: bold;
-    width: 2.0rem;
-    height: 2.0rem;
-    padding: 0.5rem;
-    border: 0.15rem dashed;
-    border-color: #ff9142;
-    position: relative;
-    border-radius: 9999px;
-    z-index: 10;
+  display: inline-block;
+  color: #ff9142;
+  font-size: 1rem;
+  font-weight: bold;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem;
+  border: 0.15rem dashed;
+  border-color: #ff9142;
+  position: relative;
+  border-radius: 9999px;
+  z-index: 10;
 }
 
 .plus_icon::before {
-    content: '';
-    position: absolute;
-    background: #ff9142;
-    width: 1.0rem;
-    height: 0.15rem;
-    border-radius: 0.25rem;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  content: "";
+  position: absolute;
+  background: #ff9142;
+  width: 1rem;
+  height: 0.15rem;
+  border-radius: 0.25rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .plus_icon::after {
-    content: '';
-    position: absolute;
-    background: #ff9142;
-    width: 0.15rem;
-    height: 1.0rem;
-    border-radius: 0.15rem;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  content: "";
+  position: absolute;
+  background: #ff9142;
+  width: 0.15rem;
+  height: 1rem;
+  border-radius: 0.15rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .arrow_left {
-    display: inline-block;
-    width: 2.0rem;
-    height: 2.0rem;
-    padding: 0.5rem;
-    position: relative;
-    z-index: 10;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem;
+  position: relative;
 }
 
 .arrow_left::before {
-    content: '';
-    position: absolute;
-    width: 0.7rem;
-    height: 0.7rem;
-    border-top: 0.2rem solid rgb(67 20 7);
-    border-right: 0.2rem solid rgb(67 20 7);
-    border-radius: 0.1rem;
-    right: 0.5rem;
-    top: 50%;
-    transform: translateY(-50%) rotate(225deg);
-    cursor: pointer;
+  content: "";
+  position: absolute;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-top: 0.2rem solid rgb(67 20 7);
+  border-right: 0.2rem solid rgb(67 20 7);
+  border-radius: 0.1rem;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%) rotate(225deg);
+  cursor: pointer;
 }
 
 .arrow_right {
-    display: inline-block;
-    width: 2.0rem;
-    height: 2.0rem;
-    padding: 0.5rem;
-    position: relative;
-    z-index: 10;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.5rem;
+  position: relative;
 }
 
 .arrow_right::before {
-    content: '';
-    position: absolute;
-    width: 0.7rem;
-    height: 0.7rem;
-    border-top: 0.2rem solid rgb(67 20 7);
-    border-right: 0.2rem solid rgb(67 20 7);
-    border-radius: 0.1rem;
-    left: 0.5rem;
-    top: 50%;
-    transform: translateY(-50%) rotate(45deg);
-    cursor: pointer;
+  content: "";
+  position: absolute;
+  width: 0.7rem;
+  height: 0.7rem;
+  border-top: 0.2rem solid rgb(67 20 7);
+  border-right: 0.2rem solid rgb(67 20 7);
+  border-radius: 0.1rem;
+  left: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+  cursor: pointer;
 }
 
 .right_caret {
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 1;
-    position: relative;
-    width: 2.0rem;
-    height: 2.0rem;
-    border-radius: 50%;
-    box-sizing: content-box;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  box-sizing: content-box;
 }
 
 .right_caret::before {
-    content: '';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-color: transparent;
-    border-width: 0.36em 0.62354em;
-    border-left-color: rgb(67 20 7);
-    border-right: 0;
-    transform: translateX(15%);
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-}
-
-.box{
-    border: 0.2rem double rgb(67 20 7);
-    border-radius: 12px;
-    position: relative;
-    margin-top: 1em;
-}
-.box h2{
-    text-align: left;
-    position: absolute;
-    right: 0;
-    left: 1rem;
-    top: -1rem;
-}
-.box span{
-    padding: 1rem;
-    background: #FFF;
-    color: rgb(67 20 7);
-}
-.box .inner{
-    padding: 1.2em .5em .5em;
+  content: "";
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: transparent;
+  border-width: 0.36em 0.62354em;
+  border-left-color: rgb(67 20 7);
+  border-right: 0;
+  transform: translateX(15%);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+
+.box {
+  border: 0.2rem double rgb(67 20 7);
+  border-radius: 12px;
+  position: relative;
+  margin-top: 1em;
+}
+.box h2 {
+  text-align: left;
+  position: absolute;
+  right: 0;
+  left: 1rem;
+  top: -1rem;
+}
+.box span {
+  padding: 1rem;
+  background: #fff;
+  color: rgb(67 20 7);
+}
+.box .inner {
+  padding: 1.2em 0.5em 0.5em;
 }
 
 .checkbox-3 {
-    border: none;
+  border: none;
 }
 
 .checkbox-3 label {
-    align-items: center;
-    padding: 0.75rem;
-    border: 0.1rem dashed #ff9142;
-    border-radius: 1.8rem;
-    cursor: pointer;
+  align-items: center;
+  padding: 0.75rem;
+  border: 0.1rem dashed #ff9142;
+  border-radius: 1.8rem;
+  cursor: pointer;
 }
 
-
 .checkbox-3 input {
-    display: none;
+  display: none;
 }
 
-.checkbox-3 input[type='radio']:checked + label {
-    background-color: #ff9142;
-    color: #fff;
+.checkbox-3 input[type="radio"]:checked + label {
+  background-color: #ff9142;
+  color: #fff;
 }
 
 .hidden_radio {
-    display: none;
+  display: none;
 }
 
 .icon_option {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .icon_image {
-    display: inline-block;
-    width: 5rem;
-    height: 5rem;
-    padding: 0.2rem;
-    border: 4px solid transparent;
+  display: inline-block;
+  width: 5rem;
+  height: 5rem;
+  padding: 0.2rem;
+  border: 4px solid transparent;
 }
 
 .icon_option input:checked + .icon_image {
-    border-radius: 100%;
-    border-color: #ff9142;
+  border-radius: 100%;
+  border-color: #ff9142;
 }
diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js
@@ -0,0 +1,7 @@
+import { Application } from "@hotwired/stimulus";
+import { Dropdown } from "tailwindcss-stimulus-components";
+
+const application = Application.start();
+application.register("dropdown", Dropdown);
+
+export default class extends Dropdown {}
diff --git a/app/views/shared/_header.html.erb b/app/views/shared/_header.html.erb
@@ -2,8 +2,10 @@
   <div class="">
     <%= link_to image_tag('logo_small.png', class: 'h-11'), root_path %>
   </div>
-  <div class="">
-    <%= link_to image_tag(current_user.icon, class: 'icon'), user_path %>
-ここにメニューおく
+  <div class="flex justify-between items-center">
+    <% if current_user %>
+      <%= link_to image_tag(current_user.icon, class: 'icon mx-2'), user_path %>
+      <%= render 'shared/menu' %>
+    <% end %>
   </div>
 </header>