jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar update

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-14 14:53:58 +05:30
parent d183cf2fd6
commit 07a72d6c9f
1 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.css
View File

@@ -426,7 +426,7 @@
-ms-overflow-style: none; /* IE/Edge */ -ms-overflow-style: none; /* IE/Edge */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem 1.25rem 1rem; padding: 1.5rem 1.25rem calc(88px + env(safe-area-inset-bottom));
} }
.journal-container::-webkit-scrollbar { .journal-container::-webkit-scrollbar {
@@ -822,16 +822,21 @@
BOTTOM NAVIGATION — Static flex item, always at bottom BOTTOM NAVIGATION — Static flex item, always at bottom
============================ */ ============================ */
.bottom-nav { .bottom-nav {
flex-shrink: 0; position: fixed;
position: relative; /* NOT fixed — lives in the flex column */ bottom: calc(16px + env(safe-area-inset-bottom));
background: var(--color-surface); left: 50%;
border-top: 1px solid rgba(0, 0, 0, 0.07); transform: translateX(-50%);
padding: 8px 12px 12px; background: #fff;
border-radius: 100px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13), 0 1px 4px rgba(0, 0, 0, 0.07);
padding: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; gap: 2px;
gap: 4px; z-index: 100;
z-index: 10; /* prevent layout from reserving space for it */
flex-shrink: 0;
width: max-content;
} }
.bottom-nav-btn { .bottom-nav-btn {
@@ -840,7 +845,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
padding: 8px 14px; padding: 10px 18px;
background: transparent; background: transparent;
border: none; border: none;
border-radius: 100px; border-radius: 100px;
@@ -896,11 +901,12 @@
.bottom-nav-btn-active { .bottom-nav-btn-active {
background: #22c55e; background: #22c55e;
color: #fff; color: #fff;
padding: 9px 18px; padding: 10px 18px;
} }
.bottom-nav-btn span,
.bottom-nav-btn-active span { .bottom-nav-btn-active span {
display: inline; display: none;
} }
.bottom-nav-btn-active:hover { .bottom-nav-btn-active:hover {
background: #16a34a; background: #16a34a;
@@ -966,7 +972,7 @@
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
padding: 1rem 1.25rem 0.5rem; padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
} }
.history-container::-webkit-scrollbar { .history-container::-webkit-scrollbar {
display: none; display: none;
@@ -1222,7 +1228,7 @@
overflow-y: auto; overflow-y: auto;
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
padding: 1rem 1.25rem 0.5rem; padding: 1rem 1.25rem calc(88px + env(safe-area-inset-bottom));
} }
.settings-container::-webkit-scrollbar { .settings-container::-webkit-scrollbar {
display: none; display: none;
@@ -2125,8 +2131,12 @@
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
bottom: auto;
transform: none;
height: 100dvh; height: 100dvh;
width: 232px; width: 232px;
border-radius: 0;
box-shadow: none;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
@@ -2408,8 +2418,8 @@
/* -- Bottom nav -- */ /* -- Bottom nav -- */
[data-theme="dark"] .bottom-nav { [data-theme="dark"] .bottom-nav {
background: var(--color-surface); background: #1e2320;
border-top-color: rgba(74, 222, 128, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.3);
} }
[data-theme="dark"] .bottom-nav-btn { [data-theme="dark"] .bottom-nav-btn {