nisse/habit-statistics
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

updated code formatting rules

Browse Source
This commit is contained in:
Nisse Lommerde 2023-06-06 15:07:59 +02:00
parent f0aec10d20
commit fde450f773
6 changed files with 317 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
resources/views/components/habits/createOrUpdate.blade.php
View File

@ -1,5 +1,8 @@
<div> <div>
<form action="{{$update ? route('habits.update', $habit) : route('habits.store')}}" method="post"> <form
action="{{$update ? route('habits.update', $habit) : route('habits.store')}}"
method="post"
>
@if ($update) @if ($update)
@method('PUT') @method('PUT')
@ -11,88 +14,164 @@
<!-- Name --> <!-- Name -->
<div> <div>
<x-input-label for="name" :value="__('Name')"/> <x-input-label
<x-text-input id="name" class="block mt-1 w-full" type="text" name="name" for="name"
placeholder="Swimming" required autofocus autocomplete="name" :value="__('Name')"/>
:value="old('name', $habit->name)"
/>
<x-input-error :messages="$errors->get('name')" class="mt-2"/> <x-text-input
id="name"
class="block mt-1 w-full"
type="text"
name="name"
placeholder="Swimming"
required
autofocus
autocomplete="name"
:value="old('name', $habit->name)"/>
<x-input-error
:messages="$errors->get('name')"
class="mt-2"/>
</div> </div>
<!-- Question --> <!-- Question -->
<div class="mt-6"> <div class="mt-6">
<x-input-label for="question" value="Question to ask"/> <x-input-label
<x-text-input id="question" class="block mt-1 w-full" type="text" name="question" for="question"
placeholder="For how long did I swim?" :value="old('question', $habit->question)" value="Question to ask"/>
<x-text-input
id="question"
class="block mt-1 w-full"
type="text"
name="question"
placeholder="For how long did I swim?"
:value="old('question', $habit->question)"
autocomplete="question"/> autocomplete="question"/>
<x-input-error :messages="$errors->get('question')" class="mt-2"/> <x-input-error
:messages="$errors->get('question')"
class="mt-2"/>
</div> </div>
<!-- Category input --> <!-- Category input -->
<div class="mt-6"> <div class="mt-6">
<x-input-label for="category" value="Category"/> <x-input-label
<x-text-input id="category" class="block mt-1 w-full" type="text" name="category" for="category"
value="Category"/>
<x-text-input
id="category"
class="block mt-1 w-full"
type="text"
name="category"
placeholder="Exercise" placeholder="Exercise"
:value="old('category', isset($habit->category->name) ? $habit->category->name : '' )" :value="old('category', isset($habit->category->name) ? $habit->category->name : '' )"
autocomplete="category"/> autocomplete="category"/>
<x-input-error :messages="$errors->get('category')" class="mt-2"/> <x-input-error
:messages="$errors->get('category')"
class="mt-2"/>
</div> </div>
<!-- tag input --> <!-- tag input -->
<div class="mt-6"> <div class="mt-6">
<x-input-label for="tag" value="Tags"/> <x-input-label
<x-text-input id="tag" class="block mt-1 w-full" type="text" name="tags" for="tag"
value="Tags"/>
<x-text-input
id="tag"
class="block mt-1 w-full"
type="text"
name="tags"
placeholder="Exercise, swimming, health" placeholder="Exercise, swimming, health"
:value="old('tag', $habit->tagsToString())" autocomplete="tag"/> :value="old('tag', $habit->tagsToString())"
<x-input-error :messages="$errors->get('tag')" class="mt-2"/> autocomplete="tag"/>
<x-input-error
:messages="$errors->get('tag')"
class="mt-2"/>
</div> </div>
</x-pagecard> </x-pagecard>
<x-pagecard> <x-pagecard>
<!-- Type --> <!-- Type -->
<div class=""> <div class="">
<x-input-label for="habit_type" value="Habit Type"></x-input-label> <x-input-label
for="habit_type"
value="Habit Type"
></x-input-label>
<div class="flex items-center mb-1 mt-1"> <div class="flex items-center mb-1 mt-1">
<!-- Radio button: do--> <!-- Radio button: do-->
<input id="habit-type-1" type="radio" value="todo" name="type" <input
onclick="toggleHabitValueSuffix(true)" @if($habit->type === 'todo') checked id="habit-type-1"
@elseif(!isset($habit->type)) checked @endif type="radio"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> value="todo"
<label for="habit-type-1" class="ml-2">To do</label> name="type"
onclick="toggleHabitValueSuffix(true)"
@if($habit->type === 'todo' || !isset($habit->type)) checked
@endif
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
>
<label
for="habit-type-1"
class="ml-2"
>To do</label>
</div> </div>
<!-- Radio button: value--> <!-- Radio button: value-->
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="habit-type-2" type="radio" value="value" name="type"
onclick="toggleHabitValueSuffix(false)" @if($habit->type === 'value') checked @endif <input
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> id="habit-type-2"
<label for="habit-type-2" class="ml-2 ">Amount and suffix</label> type="radio"
value="value"
name="type"
onclick="toggleHabitValueSuffix(false)"
@if($habit->type === 'value') checked
@endif
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
>
<label
for="habit-type-2"
class="ml-2 "
>Amount and suffix</label>
</div> </div>
<!-- Suffix --> <!-- Suffix -->
<x-input-label for="value" value="Suffix" class="mt-4" <x-input-label
id="habit-suffix-label"/> class="mt-4"
for="value"
id="habit-suffix-label"
value="Suffix"
/>
<x-text-input id="habit-suffix-name" <x-text-input
class="inline-block mt-1 disabled:opacity-50 w-1/2"
type="text" name="suffix"
placeholder="minutes"
:value="old('suffix', isset($habit->suffix) ? $habit->suffix : '')"
:disabled="!isset($habit->type) || $habit->type === 'todo' ? true : false" :disabled="!isset($habit->type) || $habit->type === 'todo' ? true : false"
autocomplete="suffix"/> :value="old('suffix', isset($habit->suffix) ? $habit->suffix : '')"
<x-input-error :messages="$errors->get('suffix')" class="mt-2"/> autocomplete="suffix"
class="inline-block mt-1 disabled:opacity-50 w-1/2"
id="habit-suffix-name"
placeholder="minutes"
type="text"
name="suffix"
/>
<x-input-error
:messages="$errors->get('suffix')"
class="mt-2"
/>
</div> </div>
<hr class="my-5"> <hr class="my-5">
<!-- Schedule --> <!-- Schedule -->
<div class=""> <div class="">
<x-input-label for="schedule-value" value="Schedule Recurrence"></x-input-label> <x-input-label
for="schedule-value"
value="Schedule Recurrence"
/>
<div class="text-sm my-1 text-gray-700"> <div class="text-sm my-1 text-gray-700">
The recurrence value determines how often you will be inquired about this habit. The recurrence value determines how often you will be inquired about this habit.
Note: this is different from setting a goal. Set to 0 to disable inquiries. Note: this is different from setting a goal. Set to 0 to disable inquiries.
@ -100,17 +179,29 @@ class="inline-block mt-1 disabled:opacity-50 w-1/2"
<div class="inline-block mt-4 pr-1"> <div class="inline-block mt-4 pr-1">
Every Every
</div> </div>
<x-text-input id="schedule-value" class="inline-block mt-1 w-20" type="number" <x-text-input
placeholder="" min="0" name="schedule_value" id="schedule-value"
class="inline-block mt-1 w-20"
type="number"
placeholder=""
min="0"
name="schedule_value"
:value="old('schedule_value', isset($habit->schedule_value) ? $habit->schedule_value : '1')" :value="old('schedule_value', isset($habit->schedule_value) ? $habit->schedule_value : '1')"
/> />
<x-input-error :messages="$errors->get('schedule_value')" class="mt-2"/> <x-input-error
:messages="$errors->get('schedule_value')"
class="mt-2"
/>
<select name="schedule_unit" id="schedule-unit" <select
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"> name="schedule_unit"
id="schedule-unit"
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
>
@foreach(['day', 'week', 'month'] as $time_unit) @foreach(['day', 'week', 'month'] as $time_unit)
<option value="{{$time_unit}}" <option
value="{{$time_unit}}"
@if($habit->schedule_unit === $time_unit) selected @endif >{{$time_unit}}s @if($habit->schedule_unit === $time_unit) selected @endif >{{$time_unit}}s
</option> </option>
@endforeach @endforeach
@ -120,9 +211,14 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
starting starting
</div> </div>
<x-text-input type="date" class="inline-block mt-1" name="schedule_start" id="schedule_start" <x-text-input
type="date"
class="inline-block mt-1"
name="schedule_start"
id="schedule_start"
:value="old('schedule_start', isset($habit->schedule_start) ? $habit->schedule_start : $today)" :value="old('schedule_start', isset($habit->schedule_start) ? $habit->schedule_start : $today)"
required/> required
/>
</div> </div>
</x-pagecard> </x-pagecard>
@ -136,48 +232,96 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
goal. goal.
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-1" type="radio" value="none" name="goal_type" <input
onclick="toggleGoalSchedule(true)" @if($habit->goal_type === 'none') checked @elseif(!isset($habit->goal_type)) checked @endif id="goal-type-1"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> type="radio"
<label for="goal-type-1" class="ml-2">No goal</label> value="none"
name="goal_type"
onclick="toggleGoalSchedule(true)"
@if($habit->goal_type === 'none') checked
@elseif(!isset($habit->goal_type)) checked
@endif
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
>
<label
for="goal-type-1"
class="ml-2"
>No goal</label>
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-2" type="radio" value="schedule" name="goal_type" <input
onclick="toggleGoalSchedule(true)" @if($habit->goal_type === 'schedule') checked @endif id="goal-type-2"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> type="radio"
<label for="goal-type-2" class="ml-2 ">Same as schedule</label> value="schedule"
name="goal_type"
onclick="toggleGoalSchedule(true)"
@if($habit->goal_type === 'schedule') checked
@endif
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
>
<label
for="goal-type-2"
class="ml-2 "
>Same as schedule</label>
</div> </div>
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<input id="goal-type-3" type="radio" value="custom" name="goal_type" <input
onclick="toggleGoalSchedule(false)" @if($habit->goal_type === 'custom') checked @endif id="goal-type-3"
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"> type="radio"
<label for="goal-type-3" class="ml-2 ">Custom schedule</label> value="custom"
name="goal_type"
onclick="toggleGoalSchedule(false)"
@if($habit->goal_type === 'custom') checked
@endif
class="w-4 h-4 text-blue-600 bg-gray-50 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
>
<label
for="goal-type-3"
class="ml-2 "
>Custom schedule</label>
</div> </div>
</div> </div>
<hr class="mt-4"> <hr class="mt-4">
<!-- goal schedule items --> <!-- goal schedule items -->
<div class="mt-4"> <div class="mt-4">
<x-input-label for="goal-schedule-unit" value="Goal Recurrence"/> <x-input-label
for="goal-schedule-unit"
value="Goal Recurrence"
/>
<div class="inline-block mt-1 pr-1"> <div class="inline-block mt-1 pr-1">
Every Every
</div> </div>
<x-text-input id="goal-schedule-amount" class="inline-block mt-1 w-20" type="number" <x-text-input
id="goal-schedule-amount"
class="inline-block mt-1 w-20"
type="number"
:value="old('goal_value', isset($habit->goal_value) ? $habit->goal_value : '1')" :value="old('goal_value', isset($habit->goal_value) ? $habit->goal_value : '1')"
placeholder="" min="1" required name="goal_value" placeholder=""
min="1"
required
name="goal_value"
:disabled="!isset($habit->goal_type) || $habit->goal_type !== 'custom' ? true : false" :disabled="!isset($habit->goal_type) || $habit->goal_type !== 'custom' ? true : false"
/> />
<x-input-error :messages="$errors->get('goal_value')" class="mt-2"/> <x-input-error
:messages="$errors->get('goal_value')"
class="mt-2"
/>
<!-- Select box --> <!-- Select box -->
<select name="goal_unit" id="goal-schedule-unit" <select
name="goal_unit"
id="goal-schedule-unit"
required required
@if(!isset($habit->goal_type) || $habit->goal_type !== 'custom') disabled @endif @if(!isset($habit->goal_type) || $habit->goal_type !== 'custom') disabled
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"> @endif
class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm disabled:opacity-50"
>
@foreach(['day', 'week', 'month'] as $time_unit) @foreach(['day', 'week', 'month'] as $time_unit)
<option value="{{$time_unit}}" <option
value="{{$time_unit}}"
@if($habit->goal_unit === $time_unit) selected @endif >{{$time_unit}}s @if($habit->goal_unit === $time_unit) selected @endif >{{$time_unit}}s
</option> </option>
@endforeach @endforeach
@ -188,9 +332,14 @@ class="inline-block w-fit border-gray-300 dark:border-gray-700 dark:bg-gray-900
</div> </div>
<!-- goal date input --> <!-- goal date input -->
<x-text-input type="date" class="inline-block mt-1" name="goal_start" id="goal-start" <x-text-input
type="date"
class="inline-block mt-1"
name="goal_start"
id="goal-start"
:value="old('goal_start', isset($habit->goal_start) ? $habit->goal_start : $today)" :value="old('goal_start', isset($habit->goal_start) ? $habit->goal_start : $today)"
:disabled="!isset($habit->goal_type) || $habit->goal_type !== 'custom' ? true : false"/> :disabled="!isset($habit->goal_type) || $habit->goal_type !== 'custom' ? true : false"
/>
</div> </div>
</x-pagecard> </x-pagecard>

4
resources/views/habits/create.blade.php
View File

@ -2,7 +2,9 @@
<div class="py-4"> <div class="py-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<x-habits.createOrUpdate :today="now()->format('Y-m-d')" :habit="$habit" :update="$update"/> <x-habits.createOrUpdate :today="now()->format('Y-m-d')"
:habit="$habit"
:update="$update"/>
</div> </div>
</div> </div>

5
resources/views/habits/edit.blade.php
View File

@ -2,9 +2,10 @@
<div class="py-4"> <div class="py-4">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<x-habits.createOrUpdate :today="now()->format('Y-m-d')" :habit="$habit" :update="$update"/> <x-habits.createOrUpdate :today="now()->format('Y-m-d')"
:habit="$habit"
:update="$update"/>
</div> </div>
</div> </div>
</x-app-layout> </x-app-layout>

24
resources/views/habits/index.blade.php
View File

@ -10,7 +10,8 @@
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100"> <div class="p-6 text-gray-900 dark:text-gray-100">
<form action="{{route('habits.create')}}" method="get"> <form action="{{route('habits.create')}}"
method="get">
@csrf @csrf
<x-primary-button>Create Habit</x-primary-button> <x-primary-button>Create Habit</x-primary-button>
</form> </form>
@ -21,19 +22,24 @@
<table class="table-auto text-left text-gray-500 dark:text-gray-400 border shadow"> <table class="table-auto text-left text-gray-500 dark:text-gray-400 border shadow">
<thead class="text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-gray-200"> <thead class="text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-gray-200">
<tr> <tr>
<th scope="col" class="px-4 py-2"> <th scope="col"
class="px-4 py-2">
Category Category
</th> </th>
<th scope="col" class="px-4 py-2"> <th scope="col"
class="px-4 py-2">
Habit Habit
</th> </th>
<th scope="col" class="px-6 py-2"> <th scope="col"
class="px-6 py-2">
Tags Tags
</th> </th>
<th scope="col" class="px-6 py-2"> <th scope="col"
class="px-6 py-2">
</th> </th>
<th scope="col" class="px-6 py-2"> <th scope="col"
class="px-6 py-2">
</th> </th>
</tr> </tr>
@ -59,13 +65,15 @@
@endif @endif
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<form action="{{route('habits.show', $habit)}}" method="get"> <form action="{{route('habits.show', $habit)}}"
method="get">
@csrf @csrf
<x-secondary-button type="submit">View</x-secondary-button> <x-secondary-button type="submit">View</x-secondary-button>
</form> </form>
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<form action="{{route('entry_create', $habit)}}" method="get"> <form action="{{route('entry_create', $habit)}}"
method="get">
@csrf @csrf
<x-primary-button>Insert</x-primary-button> <x-primary-button>Insert</x-primary-button>
</form> </form>

23
resources/views/habits/show.blade.php
View File

@ -11,7 +11,8 @@
<div class="p-6 text-gray-900 dark:text-gray-100"> <div class="p-6 text-gray-900 dark:text-gray-100">
{{ $habit->name }} <br> <br> {{ $habit->name }} <br> <br>
<form action="{{route("habits.edit", $habit)}}" method="get"> <form action="{{route("habits.edit", $habit)}}"
method="get">
<x-primary-button>Edit</x-primary-button> <x-primary-button>Edit</x-primary-button>
</form> </form>
</div> </div>
@ -26,13 +27,16 @@
<table class="table-auto text-left text-gray-700 dark:text-gray-400 border shadow rounded"> <table class="table-auto text-left text-gray-700 dark:text-gray-400 border shadow rounded">
<thead class="text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-gray-200"> <thead class="text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-gray-200">
<tr> <tr>
<th scope="col" class="px-4 py-2"> <th scope="col"
class="px-4 py-2">
Value Value
</th> </th>
<th scope="col" class="px-4 py-2"> <th scope="col"
class="px-4 py-2">
Date Date
</th> </th>
<th scope="col" class="px-6 py-2"> <th scope="col"
class="px-6 py-2">
Note Note
</th> </th>
</tr> </tr>
@ -44,11 +48,18 @@
@if($habit->type === 'todo') @if($habit->type === 'todo')
<div class="mx-auto text-center"> <div class="mx-auto text-center">
@if($entry->value == 0) @if($entry->value == 0)
<input type="checkbox" name="" id="" disabled <input type="checkbox"
name=""
id=""
disabled
class="rounded w-6 h-6 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm class="rounded w-6 h-6 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm
focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 duration-300"> focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 duration-300">
@else @else
<input type="checkbox" name="" id="" disabled checked <input type="checkbox"
name=""
id=""
disabled
checked
class="rounded w-6 h-6 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm class="rounded w-6 h-6 dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm
focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 duration-300"> focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800 duration-300">
@endif @endif

54
resources/views/layouts/navigation.blade.php
View File

@ -1,4 +1,5 @@
<nav x-data="{ open: false }" class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow"> <nav x-data="{ open: false }"
class="bg-white dark:bg-gray-800 border-b border-gray-100 dark:border-gray-700 shadow">
<!-- Primary Navigation Menu --> <!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-12"> <div class="flex justify-between h-12">
@ -12,13 +13,15 @@
<!-- Navigation Links --> <!-- Navigation Links -->
<div class="hidden space-x-6 sm:-my-px sm:ml-10 sm:flex"> <div class="hidden space-x-6 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')"> <x-nav-link :href="route('dashboard')"
:active="request()->routeIs('dashboard')">
{{ __('Dashboard') }} {{ __('Dashboard') }}
</x-nav-link> </x-nav-link>
</div> </div>
<div class="hidden space-x-6 sm:-my-px sm:ml-10 sm:flex"> <div class="hidden space-x-6 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('habits.index')" :active="request()->routeIs('habits.*')"> <x-nav-link :href="route('habits.index')"
:active="request()->routeIs('habits.*')">
{{ __('Habits') }} {{ __('Habits') }}
</x-nav-link> </x-nav-link>
</div> </div>
@ -26,14 +29,19 @@
<!-- Settings Dropdown --> <!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6"> <div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown align="right" width="48"> <x-dropdown align="right"
width="48">
<x-slot name="trigger"> <x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"> <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
<div>{{ Auth::user()->name }}</div> <div>{{ Auth::user()->name }}</div>
<div class="ml-1"> <div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <svg class="fill-current h-4 w-4"
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"/>
</svg> </svg>
</div> </div>
</button> </button>
@ -45,7 +53,8 @@
</x-dropdown-link> </x-dropdown-link>
<!-- Authentication --> <!-- Authentication -->
<form method="POST" action="{{ route('logout') }}"> <form method="POST"
action="{{ route('logout') }}">
@csrf @csrf
<x-dropdown-link :href="route('logout')" <x-dropdown-link :href="route('logout')"
@ -60,10 +69,24 @@
<!-- Hamburger --> <!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden"> <div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out"> <button @click="open = ! open"
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-900 focus:text-gray-500 dark:focus:text-gray-400 transition duration-150 ease-in-out">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <svg class="h-6 w-6"
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> stroke="currentColor"
fill="none"
viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }"
class="inline-flex"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"/>
<path :class="{'hidden': ! open, 'inline-flex': open }"
class="hidden"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"/>
</svg> </svg>
</button> </button>
</div> </div>
@ -71,9 +94,11 @@
</div> </div>
<!-- Responsive Navigation Menu --> <!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden"> <div :class="{'block': open, 'hidden': ! open}"
class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1"> <div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')"> <x-responsive-nav-link :href="route('dashboard')"
:active="request()->routeIs('dashboard')">
{{ __('Dashboard') }} {{ __('Dashboard') }}
</x-responsive-nav-link> </x-responsive-nav-link>
</div> </div>
@ -91,7 +116,8 @@
</x-responsive-nav-link> </x-responsive-nav-link>
<!-- Authentication --> <!-- Authentication -->
<form method="POST" action="{{ route('logout') }}"> <form method="POST"
action="{{ route('logout') }}">
@csrf @csrf
<x-responsive-nav-link :href="route('logout')" <x-responsive-nav-link :href="route('logout')"