mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 07:33:07 +08:00
Improve header and nav to be responsive
This commit is contained in:
Sat Naing
+63
-29
@@ -1,57 +1,80 @@
|
||||
<header>
|
||||
<div class="nav-container">
|
||||
<a href="/" class="logo">AstroPaper</a>
|
||||
<nav>
|
||||
<div class="top-nav-wrap">
|
||||
<a href="/" class="logo">AstroPaper</a>
|
||||
<button class="hamburger-menu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
||||
><path d="M4 6h16v2H4zm4 5h12v2H8zm5 5h7v2h-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="display-none sm:flex">
|
||||
<ul>
|
||||
<li><a href="/posts">Posts</a></li>
|
||||
<li><a href="/tags">Tags</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
<button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="theme-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"
|
||||
><path
|
||||
d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="sun-svg"
|
||||
><path
|
||||
d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="button-wrapper">
|
||||
<button>
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M19.023 16.977a35.13 35.13 0 0 1-1.367-1.384c-.372-.378-.596-.653-.596-.653l-2.8-1.337A6.962 6.962 0 0 0 16 9c0-3.859-3.14-7-7-7S2 5.141 2 9s3.14 7 7 7c1.763 0 3.37-.66 4.603-1.739l1.337 2.8s.275.224.653.596c.387.363.896.854 1.384 1.367l1.358 1.392.604.646 2.121-2.121-.646-.604c-.379-.372-.885-.866-1.391-1.36zM9 14c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="theme-btn">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"
|
||||
><path
|
||||
d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="sun-svg"
|
||||
><path
|
||||
d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<hr />
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
/* @apply bg-slate-700; */
|
||||
hr {
|
||||
@apply border-skin-line opacity-50 mx-4 max-w-3xl sm:mx-auto;
|
||||
}
|
||||
.nav-container {
|
||||
@apply max-w-3xl mx-auto flex justify-between items-center py-8 border-b-2 border-opacity-40 border-b-skin-line;
|
||||
@apply max-w-3xl mx-auto flex flex-col sm:flex-row justify-between items-center;
|
||||
/* border-b-2 border-opacity-40 border-b-skin-line */
|
||||
}
|
||||
.top-nav-wrap {
|
||||
@apply w-full p-4 sm:py-8 flex justify-between items-center;
|
||||
}
|
||||
.logo {
|
||||
@apply font-semibold text-3xl;
|
||||
@apply font-semibold text-xl sm:text-3xl;
|
||||
}
|
||||
.hamburger-menu {
|
||||
@apply p-2 sm:hidden;
|
||||
}
|
||||
.hamburger-menu svg {
|
||||
@apply fill-skin-base w-6 h-6;
|
||||
}
|
||||
nav {
|
||||
@apply flex items-center space-x-2;
|
||||
@apply w-full py-2 flex flex-col items-center sm:justify-end sm:flex-row sm:space-x-2 bg-skin-fill shadow sm:shadow-none;
|
||||
}
|
||||
nav ul {
|
||||
@apply flex space-x-4;
|
||||
@apply flex flex-col sm:flex-row sm:space-x-4;
|
||||
}
|
||||
nav li {
|
||||
@apply py-2;
|
||||
@apply py-2 text-center my-2;
|
||||
}
|
||||
nav a {
|
||||
@apply py-2 px-3 font-medium hover:text-skin-accent;
|
||||
}
|
||||
.button-wrapper {
|
||||
@apply flex my-2 sm:space-x-2;
|
||||
}
|
||||
nav button {
|
||||
@apply p-2;
|
||||
}
|
||||
@@ -61,9 +84,9 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Toggle Theme
|
||||
const themeBtn = document.querySelector("#theme-btn");
|
||||
const htmlClassList = document.querySelector("html")?.classList;
|
||||
|
||||
themeBtn?.addEventListener("click", function () {
|
||||
if (htmlClassList?.contains("theme-dark")) {
|
||||
localStorage.setItem("theme", "light");
|
||||
@@ -73,4 +96,15 @@
|
||||
htmlClassList?.add("theme-dark");
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle menu
|
||||
const menuBtn = document.querySelector(".hamburger-menu");
|
||||
const navClassList = document.querySelector("nav")?.classList;
|
||||
menuBtn!.addEventListener("click", function () {
|
||||
if (navClassList?.contains("display-none")) {
|
||||
navClassList?.remove("display-none");
|
||||
} else {
|
||||
navClassList?.add("display-none");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user