rushilwiz/potentia-website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/potentia-website.git synced 2025-04-03 20:10:15 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

simple navbar

Browse Source
This commit is contained in:
SanjayramVempati 2023-03-03 18:28:27 -05:00
parent b4928a3d81
commit 58865ea6be
8 changed files with 1398 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
astro.config.mjs
View File

@ -1,4 +1,9 @@
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});
import tailwind from "@astrojs/tailwind";
// https://astro.build/config
export default defineConfig({
integrations: [tailwind()]
});

1294
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -10,6 +10,9 @@
"astro": "astro"
},
"dependencies": {
"astro": "^2.0.17"
"@astrojs/tailwind": "^3.0.1",
"astro": "^2.0.17",
"astro-icon": "^0.8.0",
"tailwindcss": "^3.2.7"
}
}
}

61
src/components/Nav.astro Normal file
View File

@ -0,0 +1,61 @@
---
// Imports
import { Icon } from "astro-icon";
// Image imports
import logo from "../images/logo.png";
// Pages
const navbar = [
{
name: "Home",
href: "/",
},
{
name: "Blog",
href: "/blog/",
},
{
name: "Docs",
href: "/docs/",
},
{
name: "Source",
href: "https://github.com/lancerossdev/nofuss",
},
];
const desktopIcons = "dark:text-zinc-300 text-black hover:text-zinc-500 dark:hover:text-zinc-400 hidden sm:block";
const mobileIcons = "dark:text-zinc-300 text-black hover:text-zinc-500 dark:hover:text-zinc-400 sm:hidden";
---
<header class="bg-white dark:bg-zinc-900 text-lg dark:text-zinc-300 mx-auto max-w-6xl flex flex-row justify-between">
<a href="/" class="mx-8 flex items-center" aria-label="Website Logo">
<img src={logo} alt="" class="h-11">
</a>
{
(
<nav class="pt-6 flex flex-row space-x-8">
{navbar.map((navbar) => (
<a href={navbar.href} class={desktopIcons}>
{navbar.name}
</a>
))}
</nav>
)
}
<button class="nav-toggle mx-8 my-5 sm:invisible" aria-label="menu button">
<Icon name="ri:menu-4-line" class="w-8 h-8" />
</button>
</header>
<header class="nav-menu hidden bg-white dark:bg-zinc-900">
{
(
<nav class="m-8 flex-col inline-flex space-y-3">
{navbar.map((navbar) => (
<a href={navbar.href} class={mobileIcons}>
{navbar.name}
</a>
))}
</nav>
)
}
</header>

BIN
src/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

17
src/layouts/Layout.astro Normal file
View File

@ -0,0 +1,17 @@
---
var {title} = Astro.props;
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<slot></slot>
</body>
</html>

21
src/pages/index.astro
View File

@ -1,16 +1,11 @@
---
import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<!-- Init -->
<Layout>
<Nav></Nav>
</Layout>

8
tailwind.config.cjs Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
}