Logo and responsiveness changes
This commit is contained in:
@ -44,49 +44,49 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
|
||||
|
||||
return (
|
||||
<div
|
||||
class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
|
||||
class={`fixed bottom-3 sm:bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
|
||||
isScrolling.value ? "opacity-30" : "opacity-100"
|
||||
} ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
|
||||
>
|
||||
<div class="overflow-visible">
|
||||
<ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
|
||||
<li class="mx-1">
|
||||
<ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
|
||||
<li class="mx-0.5 sm:mx-1">
|
||||
<a href="/" class={currentPath === "/" ? "menu-active" : ""}>
|
||||
<div class="tooltip" data-tip="Home">
|
||||
<Home />
|
||||
<Home size={18} class="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1">
|
||||
<li class="mx-0.5 sm:mx-1">
|
||||
<a
|
||||
href="/posts"
|
||||
class={isPostsPath(currentPath) ? "menu-active" : ""}
|
||||
>
|
||||
<div class="tooltip" data-tip="Posts">
|
||||
<NotebookPen />
|
||||
<NotebookPen size={18} class="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1">
|
||||
<li class="mx-0.5 sm:mx-1">
|
||||
<a
|
||||
href="/resume"
|
||||
class={currentPath === "/resume" ? "menu-active" : ""}
|
||||
>
|
||||
<div class="tooltip" data-tip="Resume">
|
||||
<FileText />
|
||||
<FileText size={18} class="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="mx-1">
|
||||
<li class="mx-0.5 sm:mx-1">
|
||||
<a
|
||||
href="/projects"
|
||||
class={currentPath.startsWith("/projects") ? "menu-active" : ""}
|
||||
>
|
||||
<div class="tooltip" data-tip="Projects">
|
||||
<CodeXml />
|
||||
<CodeXml size={18} class="sm:w-5 sm:h-5" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
Reference in New Issue
Block a user