20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

memory page header, floating button

Browse Source
This commit is contained in:
Chaebean Yang 2025-06-01 01:22:55 +09:00
parent e25f5f1897
commit 562236acb3
2 changed files with 60 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/Button.svelte
View File

@ -51,4 +51,16 @@
background-color: var(--gray-100); background-color: var(--gray-100);
color: var(--gray-600); color: var(--gray-600);
} }
.memory {
background-color: var(--memory-500);
color: var(--white);
font-weight: 600;
}
.memory:hover {
background-color: var(--memory-400);
color: var(--white);
font-weight: 600;
}
</style> </style>

59
src/lib/components/Nav.svelte
View File

@ -4,6 +4,7 @@
let title = "Travel App"; let title = "Travel App";
export let activeTab = "Home"; export let activeTab = "Home";
export let darkMode = false;
/** /**
* *
@ -15,13 +16,15 @@
goto('/'); goto('/');
} else if (tab === 'Planner') { } else if (tab === 'Planner') {
goto('/trips'); goto('/trips');
} else if (tab === 'Memory') {
goto('/memories');
} else { } else {
console.log("will be implemented later"); console.log("will be implemented later");
} }
} }
</script> </script>
<nav> <nav class:dark-mode={darkMode}>
<div class="logo">{title}</div> <div class="logo">{title}</div>
<div class="right-nav"> <div class="right-nav">
<div class="menu"> <div class="menu">
@ -43,7 +46,7 @@
</div> </div>
<div class="profile"> <div class="profile">
<button class="profile-btn" aria-label="Open profile"> <button class="profile-btn" aria-label="Open profile">
<i class="fa-regular fa-user fa-xl" style="color: {Colors.black}"></i> <i class="fa-regular fa-user fa-xl"></i>
</button> </button>
</div> </div>
</div> </div>
@ -55,10 +58,10 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 2rem; padding: 1rem 2rem;
border-bottom: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-200);
background-color: var(--white); background-color: var(--white);
} }
.logo { .logo {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
@ -69,11 +72,11 @@
align-items: center; align-items: center;
gap: 1.5rem; gap: 1.5rem;
} }
.menu { .menu {
display: flex; display: flex;
} }
.menu button { .menu button {
background: none; background: none;
border: none; border: none;
@ -85,16 +88,16 @@
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
} }
.menu button.active { .menu button.active {
color: var(--black); color: var(--black);
font-weight: 600; font-weight: 600;
} }
.menu button:hover { .menu button:hover {
color: var(--black); color: var(--black);
} }
.profile-btn { .profile-btn {
background: none; background: none;
border: none; border: none;
@ -106,9 +109,43 @@
border-radius: 50%; border-radius: 50%;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
.profile-btn:hover { .profile-btn:hover {
background-color: var(--gray-100); background-color: var(--gray-100);
opacity: 1; opacity: 1;
} }
</style>
nav.dark-mode {
background-color: var(--black);
border-bottom: 1px solid var(--gray-200);
}
nav.dark-mode .menu button {
color: var(--gray-400);
}
nav.dark-mode .menu button:hover {
color: var(--white);
}
nav.dark-mode .menu button.active {
color: var(--white);
font-weight: 600;
}
nav.dark-mode .profile-btn {
background-color: var(--black);
}
nav.dark-mode .profile-btn:hover {
background-color: var(--gray-700);
}
nav .profile-btn i {
color: var(--black);
}
nav.dark-mode .profile-btn i {
color: var(--white);
}
</style>