setting up navbar

2022-11-02 22:03:42 +05:30
parent c755263b27
commit ee30a40c17
11 changed files with 313 additions and 102 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSameLine": true
+}
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,7 +3,10 @@ import { defineConfig } from 'astro/config';
 // https://astro.build/config
 import tailwind from "@astrojs/tailwind";

+// https://astro.build/config
+import alpinejs from "@astrojs/alpinejs";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind(), alpinejs()]
 });
--- a/package.json
+++ b/package.json
@@ -11,7 +11,10 @@
    "astro": "astro"
  },
  "dependencies": {
+    "@astrojs/alpinejs": "^0.1.2",
    "@astrojs/tailwind": "^2.1.1",
+    "@types/alpinejs": "^3.0.0",
+    "alpinejs": "^3.0.0",
    "astro": "^1.6.0",
    "tailwindcss": "^3.0.24"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,12 +1,18 @@
 lockfileVersion: 5.4

 specifiers:
+  '@astrojs/alpinejs': ^0.1.2
  '@astrojs/tailwind': ^2.1.1
+  '@types/alpinejs': ^3.0.0
+  alpinejs: ^3.0.0
  astro: ^1.6.0
  tailwindcss: ^3.0.24

 dependencies:
+  '@astrojs/alpinejs': 0.1.2_epas4sveda2fzipjieohqzpxgq
  '@astrojs/tailwind': 2.1.1_tailwindcss@3.2.1
+  '@types/alpinejs': 3.7.1
+  alpinejs: 3.10.5
  astro: 1.6.2
  tailwindcss: 3.2.1

@@ -20,6 +26,16 @@ packages:
      '@jridgewell/trace-mapping': 0.3.17
    dev: false

+  /@astrojs/alpinejs/0.1.2_epas4sveda2fzipjieohqzpxgq:
+    resolution: {integrity: sha512-pcy+r7TTeFMbdZpRUuOYbf5L3ccFp107gH9j0Hdl5z8hmrSw9918pxkK1tiAcbwrQKxifv7nM5V5FJKu7SoJrw==}
+    peerDependencies:
+      '@types/alpinejs': ^3.0.0
+      alpinejs: ^3.0.0
+    dependencies:
+      '@types/alpinejs': 3.7.1
+      alpinejs: 3.10.5
+    dev: false
+
  /@astrojs/compiler/0.23.5:
    resolution: {integrity: sha512-vBMPy9ok4iLapSyCCT1qsZ9dK7LkVFl9mObtLEmWiec9myGHS9h2kQY2xzPeFNJiWXUf9O6tSyQpQTy5As/p3g==}
    dev: false
@@ -505,6 +521,12 @@ packages:
      '@types/estree': 1.0.0
    dev: false

+  /@types/alpinejs/3.7.1:
+    resolution: {integrity: sha512-gzwyuHXH/meGQQhurMGWlZgMQxe18lMOoSPd7X6CvGoDelHte9EsU7SpTIoRu8yYir0tbHDeaSMdX9LeQz/QtA==}
+    dependencies:
+      '@vue/reactivity': 3.2.41
+    dev: false
+
  /@types/babel__core/7.1.19:
    resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
    dependencies:
@@ -613,6 +635,26 @@ packages:
      vscode-uri: 2.1.2
    dev: false

+  /@vue/reactivity/3.1.5:
+    resolution: {integrity: sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==}
+    dependencies:
+      '@vue/shared': 3.1.5
+    dev: false
+
+  /@vue/reactivity/3.2.41:
+    resolution: {integrity: sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==}
+    dependencies:
+      '@vue/shared': 3.2.41
+    dev: false
+
+  /@vue/shared/3.1.5:
+    resolution: {integrity: sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==}
+    dev: false
+
+  /@vue/shared/3.2.41:
+    resolution: {integrity: sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==}
+    dev: false
+
  /acorn-jsx/5.3.2_acorn@8.8.1:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@@ -646,6 +688,12 @@ packages:
    hasBin: true
    dev: false

+  /alpinejs/3.10.5:
+    resolution: {integrity: sha512-qlvnal44Gof2XVfm/lef8fYpXKxR9fjdSki7aFB/9THyFvbsRKZ6lM5SjxXpIs7B0faJt7bgpK2K25gzrraXJw==}
+    dependencies:
+      '@vue/reactivity': 3.1.5
+    dev: false
+
  /ansi-align/3.0.1:
    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
    dependencies:
--- a/src/components/container.astro
+++ b/src/components/container.astro
@@ -0,0 +1,7 @@
+---
+const { class: className } = Astro.props;
+---
+
+<div class:list={["max-w-screen-xl mx-auto px-5", className]}>
+  <slot />
+</div>
--- a/src/components/navbar/dropdown.astro
+++ b/src/components/navbar/dropdown.astro
@@ -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>
--- a/src/components/navbar/navbar.astro
+++ b/src/components/navbar/navbar.astro
@@ -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>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import Navbar from "@components/navbar/navbar.astro";
+
 export interface Props {
  title: string;
 }
@@ -13,23 +15,17 @@ const { title } = Astro.props;
    <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>
+    <title>{title} {title && "|"} Astro Ship</title>
  </head>
  <body>
+    <Navbar />
    <slot />
-	</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;
+      // Improve Page speed
+      // https://css-tricks.com/almanac/properties/c/content-visibility/
+      img {
+        content-visibility: auto;
      }
    </style>
+  </body>
+</html>
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -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 &amp; 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>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,14 @@
 ---
-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.">
+<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 />
+      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">
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,20 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@lib/*": [
+        "lib/*"
+      ],
+      "@utils/*": [
+        "utils/*"
+      ],
+      "@components/*": [
+        "components/*"
+      ],
+      "@layouts/*": [
+        "layouts/*"
+      ],
+    }
+  }
 }