Skip to content

Commit

Permalink
Give a little bit more space in navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@madalinpopa
madalinpopa committed Sep 22, 2024
1 parent f2716fb commit 064bd32
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 93 deletions.
184 changes: 92 additions & 92 deletions src/components/Navigation.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,101 +6,101 @@ const currentPath = Astro.url.pathname;
---

<nav
x-data="{showMenu: false, currentUrl: window.location.pathname}"
class="border-b border-b-slate-600 border-1"
x-data="{showMenu: false, currentUrl: window.location.pathname}"
class="border-b border-b-slate-600 border-1"
>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl">
<div class="flex h-16 items-center justify-between">
<div class="flex justify-between items-center w-full">
<div class="flex-shrink-0">
<SocialIcons />
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="/"
class={currentPath === "/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Home
</a>
<a
href="/services/"
class={currentPath === "/services/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>How I Can Help You
</a>
<a
href="/experience/"
class={currentPath === "/experience/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Experience
</a>
<a
href="/about/"
class={currentPath === "/about/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>About me
</a>
<a
href="/contact/"
class={currentPath === "/contact/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Contact
</a>
</div>
</div>
</div>
<MenuButton />
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl">
<div class="flex h-16 items-center justify-between">
<div class="flex justify-between items-center w-full">
<div class="flex-shrink-0">
<SocialIcons />
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="/"
class={currentPath === "/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Home
</a>
<a
href="/services/"
class={currentPath === "/services/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>How I Can Help You
</a>
<a
href="/experience/"
class={currentPath === "/experience/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Experience
</a>
<a
href="/about/"
class={currentPath === "/about/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>About me
</a>
<a
href="/contact/"
class={currentPath === "/contact/"
? "bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium"
: "rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"}
>Contact
</a>
</div>
</div>
</div>
<MenuButton />
</div>
</div>

<!-- Mobile menu, show/hide based on menu state. -->
<div x-cloak x-show="showMenu" class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="/"
class={currentPath === "/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Home
</a>
<a
href="/services/"
class={currentPath === "/services/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>How I Can Help You
</a>
<a
href="/experience/"
class={currentPath === "/experience/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Experience
</a>
<a
href="/about/"
class={currentPath === "/about/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>About me
</a>
<a
href="/contact/"
class={currentPath === "/contact/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Contact
</a>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div x-cloak x-show="showMenu" class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pb-3 pt-2">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
href="/"
class={currentPath === "/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Home
</a>
<a
href="/services/"
class={currentPath === "/services/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>How I Can Help You
</a>
<a
href="/experience/"
class={currentPath === "/experience/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Experience
</a>
<a
href="/about/"
class={currentPath === "/about/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>About me
</a>
<a
href="/contact/"
class={currentPath === "/contact/"
? "bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium"
: "text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium"}
>Contact
</a>
</div>
</div>
</div>
</nav>
2 changes: 1 addition & 1 deletion src/layouts/PageContent.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Footer from "../components/Footer.astro";
<Navigation />
<main>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl">
<div class="mx-auto max-w-4xl">
<slot />
</div>
</div>
Expand Down

0 comments on commit 064bd32

Please sign in to comment.