Jonas_Jones/blog.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/blog.jonasjones.dev.git synced 2025-10-22 23:49:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

changed navbar layout

Browse source
This commit is contained in:
J-onasJones 2024-06-07 16:31:14 +02:00
parent 0fd13fd30b
commit eda9ed1e5e
2 changed files with 36 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/App.svelte
View file

@ -25,7 +25,6 @@
let searchValue = ''; let searchValue = '';
function handleSearch(event) { function handleSearch(event) {
// Update the searchValue with the value received from the child component
searchValue = event.detail; searchValue = event.detail;
} }
</script> </script>

56
src/components/Navbar.svelte
View file

@ -13,13 +13,14 @@
<nav class="navbar"> <nav class="navbar">
<ul> <ul>
<li><a href="/#/">Home</a></li> <li><a href="/#/">Posts</a></li>
<li><a href="https://jonasjones.dev/about">About</a></li> <li><a href="https://jonasjones.dev/about">About</a></li>
<li><a href="#contact">Contact</a></li> <li id="navbarsearchparent"><input id="overflownavbar" class="navbarsearch" type="text" bind:value={searchTerm} on:input={handleSearch} placeholder="Search posts..." /></li>
<input type="text" bind:value={searchTerm} /> <li><a href="https://jonasjones.dev">Homepage</a></li>
<button on:click={handleSearch}>Search</button>
<a href="https://jonasjones.dev" class="sticky-link">Homepage</a>
</ul> </ul>
<div id="overflownavbarsub">
<input id="overflownacbarsubitem" class="navbarsearch" type="text" bind:value={searchTerm} on:input={handleSearch} placeholder="Search posts..." />
</div>
</nav> </nav>
<style> <style>
@ -42,7 +43,7 @@
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; /* Ensures ul takes full width */ width: 100%;
} }
li { li {
@ -60,28 +61,43 @@
color: #d1d0c5; color: #d1d0c5;
} }
.sticky-link { #overflownavbarsub {
position: absolute; display: none;
top: 0; gap: 20px;
right: 0; justify-content: center;
padding: 10px 20px;
text-decoration: none;
} }
@media (max-width: 650px) { .navbarsearch {
height: 25px;
padding: 5px;
margin-bottom: 5px;
background-color: #303030;
border-color: #e2b714;
border-radius: 5px;
border-width: 0px;
color: #e2b714;
}
@media (max-width: 550px) {
#overflownavbar {
display: none;
}
#overflownavbarsub {
display: flex;
}
.navbar { .navbar {
flex-direction: column; flex-direction: column;
} }
.sticky-link { .navbarsearch {
position: relative; width: 90%;
padding: 10px 20px;
} }
}
@media (max-width: 500px) { #navbarsearchparent {
.sticky-link { width: 90%;
display: none; border-color: red;
} }
} }
</style> </style>