setting up navbar
This commit is contained in:
Surjith S M
7
src/components/container.astro
Normal file
7
src/components/container.astro
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
const { class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={["max-w-screen-xl mx-auto px-5", className]}>
|
||||
<slot />
|
||||
</div>
|
||||
32
src/components/navbar/dropdown.astro
Normal file
32
src/components/navbar/dropdown.astro
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
const { title, children } = Astro.props;
|
||||
---
|
||||
|
||||
<div @click.away="open = false" class="relative" x-data="{ open: false }">
|
||||
<button @click="open = !open" class="flex">
|
||||
<span>{title}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
:class="{'rotate-180': open, 'rotate-0': !open}"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform lg:opacity-0 lg:scale-95"
|
||||
x-transition:enter-end="transform lg:opacity-100 lg:scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform lg:opacity-100 lg:scale-100"
|
||||
x-transition:leave-end="transform lg:opacity-0 lg:scale-95"
|
||||
class="lg:absolute lg:right-0 w-full mt-2 origin-top-right lg:w-48">
|
||||
<div class="px-2 py-2 lg:bg-white lg:rounded-md lg:shadow">
|
||||
{children.map((item) => <div>{item.title}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
87
src/components/navbar/navbar.astro
Normal file
87
src/components/navbar/navbar.astro
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
import Container from "@components/container.astro";
|
||||
import Dropdown from "./dropdown.astro";
|
||||
|
||||
const menuitems = [
|
||||
{
|
||||
title: "Features",
|
||||
path: "#",
|
||||
children: [
|
||||
{ title: "Action", path: "#" },
|
||||
{ title: "Another action", path: "#" },
|
||||
{ title: "Dropdown Submenu", path: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Pricing",
|
||||
path: "/pricing",
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
path: "/about",
|
||||
},
|
||||
{
|
||||
title: "Blog",
|
||||
path: "/blog",
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
path: "#",
|
||||
children: [
|
||||
{ title: "Action", path: "#" },
|
||||
{ title: "Another action", path: "#" },
|
||||
{ title: "Dropdown Submenu", path: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<Container>
|
||||
<header
|
||||
class="flex justify-between my-5"
|
||||
x-data="{ open: false }"
|
||||
x-init="$watch('open', value => console.log(value))">
|
||||
<div>Astroship</div>
|
||||
<nav
|
||||
class="lg:block"
|
||||
:class="{ 'block': open, 'hidden': !open }"
|
||||
x-show.transition="true">
|
||||
<ul class="flex flex-col lg:flex-row gap-3">
|
||||
{
|
||||
menuitems.map((item) => (
|
||||
<li>
|
||||
{item.children && (
|
||||
<Dropdown title={item.title} children={item.children} />
|
||||
)}
|
||||
{!item.children && <a href={item.path}>{item.title}</a>}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<div class="block lg:hidden">
|
||||
<button @click="open = !open" class="text-gray-800">
|
||||
<svg
|
||||
fill="currentColor"
|
||||
class="w-4 h-4"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Menu</title>
|
||||
<path
|
||||
x-show="open"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"
|
||||
></path>
|
||||
<path
|
||||
x-show="!open"
|
||||
fill-rule="evenodd"
|
||||
d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div> login
|
||||
</div>
|
||||
</header>
|
||||
</Container>
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import Navbar from "@components/navbar/navbar.astro";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
@@ -8,28 +10,22 @@ const { title } = Astro.props;
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title} {title && "|"} Astro Ship</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar />
|
||||
<slot />
|
||||
<style is:global>
|
||||
// Improve Page speed
|
||||
// https://css-tricks.com/almanac/properties/c/content-visibility/
|
||||
img {
|
||||
content-visibility: auto;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
:root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
}
|
||||
html {
|
||||
font-family: system-ui, sans-serif;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
code {
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1 +1,13 @@
|
||||
about
|
||||
<div>about</div>
|
||||
|
||||
<div
|
||||
class="max-w-lg p-5 mt-10 text-sm text-left text-gray-600 border max-h-14"
|
||||
>
|
||||
<p>
|
||||
Thank you for being an early customer. We are still working on our
|
||||
collection of components & templates. It will take some time.
|
||||
By buying early, you will get 50% discount on the original price +
|
||||
all future updates for lifetime free! Sweet isn't it? It's a gift
|
||||
for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -1,81 +1,82 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import Card from "@components/Card.astro";
|
||||
import Layout from "@layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br />
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
<Layout title="">
|
||||
<main>
|
||||
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
|
||||
<p class="instructions">
|
||||
To get started, open the directory <code>src/pages</code> in your project.<br
|
||||
/>
|
||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
|
||||
</p>
|
||||
<ul role="list" class="link-card-grid">
|
||||
<Card
|
||||
href="https://docs.astro.build/"
|
||||
title="Documentation"
|
||||
body="Learn how Astro works and explore the official API docs."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/integrations/"
|
||||
title="Integrations"
|
||||
body="Supercharge your project with new frameworks and libraries."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/themes/"
|
||||
title="Themes"
|
||||
body="Explore a galaxy of community-built starter themes."
|
||||
/>
|
||||
<Card
|
||||
href="https://astro.build/chat/"
|
||||
title="Community"
|
||||
body="Come say hi to our amazing Discord community. ❤️"
|
||||
/>
|
||||
</ul>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1.5rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
.text-gradient {
|
||||
background-image: var(--accent-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 400%;
|
||||
background-position: 0%;
|
||||
}
|
||||
.instructions {
|
||||
line-height: 1.6;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(var(--accent), 25%);
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
.instructions code {
|
||||
font-size: 0.875em;
|
||||
font-weight: bold;
|
||||
background: rgba(var(--accent), 12%);
|
||||
color: rgb(var(--accent));
|
||||
border-radius: 4px;
|
||||
padding: 0.3em 0.45em;
|
||||
}
|
||||
.instructions strong {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
.link-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user