Skip to content

Bottom navigation for mobile added #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Bottom navigation for mobile added #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
48f92b5
Bottom navigation for mobile added
MHamzaBham Mar 1, 2025
14854e3
Syntax error resolved
MHamzaBham Mar 1, 2025
d522b00
syntax errors resolved
MHamzaBham Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions public/assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}

.cursor-pointer{
cursor: pointer
cursor: pointer;
}

/* Accounts */
Expand All @@ -32,4 +32,14 @@
#profileImage:hover {
transition: 0.3s ease-in-out;
opacity: 0.5;
}
}

/* Transaction Add Button */
.transaction-add-button{
transform: scale(1);
transition: 0.3s ease-in-out;
}

.transaction-add-button:hover {
transform: scale(1.1);
}
4 changes: 4 additions & 0 deletions resources/views/dashboard.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,10 @@ class="ms-auto text-sm font-weight-bold">{{ $category['percentage'] }}%</span>
</div>
</div>
</div>

<div id="modalDiv">
@include('transactions.add-edit-modal')
</div>
@endsection

@section('script')
Expand Down
84 changes: 58 additions & 26 deletions resources/views/layouts/navigation.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="col-12">
<!-- Navbar -->
<nav
class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-2 start-0 end-0">
class="d-lg-block d-none navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-2 start-0 end-0">
<div class="container-fluid px-0">
<button class="navbar-toggler shadow-none border-0 outline-none px-0" type="button"
data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation"
Expand All @@ -21,31 +21,31 @@ class="navbar navbar-expand-lg blur blur-rounded top-0 z-index-3 shadow my-3 py-
</a>
<div class="d-lg-none d-block">
@if (Auth::check())
<div class="dropdown">
<a class="avatar avatar-sm shadow-md cursor-pointer rounded-circle overflow-hidden mt-2"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ Auth::user()->image ? asset('storage/' . Auth::user()->image) : asset('assets/img/user-placeholder.png') }}"
alt="team4">
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
class="nav-link dropdown-item">
Profile
</a>
</li>
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<a class="nav-link dropdown-item"
onclick="event.preventDefault(); this.closest('form').submit();">
Logout
<div class="dropdown">
<a class="avatar avatar-sm shadow-md cursor-pointer rounded-circle overflow-hidden mt-2"
type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ Auth::user()->image ? asset('storage/' . Auth::user()->image) : asset('assets/img/user-placeholder.png') }}"
alt="team4">
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
class="nav-link dropdown-item">
Profile
</a>
</form>
</li>
</ul>
</div>
@endif
</li>
<li>
<form method="POST" action="{{ route('logout') }}">
@csrf
<a class="nav-link dropdown-item"
onclick="event.preventDefault(); this.closest('form').submit();">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although very small, it is always better to move it to separate javascript function which could be reused if needed.

Logout
</a>
</form>
</li>
</ul>
</div>
@endif
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav mx-auto ms-xl-auto ">
Expand Down Expand Up @@ -104,12 +104,44 @@ class="nav-link dropdown-item">
</div>
@endif
</ul>


</div>
</div>
</nav>
<!-- End Navbar -->

{{-- Mobile Bottom Navigation --}}
<nav class="d-lg-none fixed-bottom bottom-2 mx-3 px-5 py-2 shadow start-0 end-0 bg-white blur blur-rounded">

<div class="d-flex justify-content-between align-items-center">
<a href="{{ route('dashboard') }}" class="text-dark text-decoration-none">
<i class="fas fa-chart-line fa-lg"></i>
</a>

<a href="{{ route('transactions.index') }}" class="text-dark text-decoration-none">
<i class="far fa-credit-card fa-lg"></i>
</a>

<a href="#" data-bs-toggle="modal" data-bs-target="#transactionModal" onclick="openModalForAdd()"
class="bg-primary shadow text-white rounded-circle d-flex align-items-center justify-content-center transaction-add-button"
style="width: 40px; height: 40px;">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If custom styling is required it is better to create a class in app css file and use that class here.

<span class="btn-inner--icon">
<i class="fas fa-plus"></i>
</span>
</a>


<a href="{{ route('accounts.index') }}" class="text-dark text-decoration-none">
<i class="far fa-building fa-lg"></i>
</a>

<a href="{{ route('profile.show', ['profile' => Auth::user()->id]) }}"
class="text-dark text-decoration-none">
<i class="far fa-user fa-lg"></i>
</a>
</div>
</nav>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/partials/success-toast.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{-- Success Toast --}}
<div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
<div id="successToast" class="toast align-items-center text-white bg-gradient-primary border-0 position-fixed bottom-0 start-0 mb-3 ms-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000" style="z-index: 1040;">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cannot we use Bootstrap class for z-index?
Refer https://getbootstrap.com/docs/5.3/utilities/z-index/

<div class="d-flex">
<div id="successToastBody" class="toast-body">
<!-- The message will be updated dynamically -->
Expand Down
Loading