...

src/components/footer.astro

@@ -1,16 +1,16 @@
 ---
 import { getLangFromUrl, useTranslations } from '../i18n/utils';
-import { languages } from "../i18n/languages";
+
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
-import LanguageSelector from "./language-select"
+
 const currentPath =  Astro.url.pathname.replace(/^\/[a-z]{2}(-[a-z]{2})?\//, '');
 ---
 
 
 
 <footer class="my-20">
-<LanguageSelector lang={lang} languages={languages} client:idle/>
+
 {/* 
   <ul>
     {Object.entries(languages).map(([lang, label]) => (

src/components/language-select.tsx

@@ -9,7 +9,7 @@ languages: {
 
 const LanguageSelector: React.FC<Props> = ({ lang, languages }) => {
 return (
-  <div>
+  <div className="bg-white text-gray-800 cursor-pointer focus:ring-opacity-50">
     <select
       aria-label="Language Selector"
       value={lang}
@@ -19,7 +19,7 @@ return (
         const slug = rest.join('/');
         window.location.pathname = `/${newLang}/${slug}`;
       }}
-      className="bg-white text-gray-800 rounded-full px-4 py-2 shadow-lg focus:ring focus:ring-opacity-50"
+
     >
       {Object.entries(languages).map(([lang, label]) => (
         <option key={lang} value={lang}>

src/components/navbar/dropdown.astro

@@ -0,0 +1,42 @@
+---
+const { title, lastItem, children, lang } = Astro.props;
+---
+
+<li @click.away="open = false" class="relative" x-data="{ open: false }">
+  <button
+    @click="open = !open"
+    class="flex items-center gap-1 w-full lg:w-auto lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+    <span>{title}</span>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="3"
+      stroke="currentColor"
+      class="w-3 h-3 mt-0.5"
+      :class="{'rotate-180': open, 'rotate-0': !open}">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path>
+    </svg>
+  </button>
+  <div
+    x-cloak
+    x-show="open"
+    class:list={[
+      "lg:absolute z-50  w-full  lg:w-48",
+      lastItem ? "lg:right-0 origin-top-right" : "lg:left-0 origin-top-left",
+    ]}>
+    <div
+      class="px-3 lg:py-2 lg:bg-white lg:rounded-md lg:shadow lg:border flex flex-col">
+      {
+        children.map((item:any) => (
+          <a href={`/${lang}${item.path}`} class="py-1 text-gray-600 hover:text-gray-900">
+            {item.title}
+          </a>
+        ))
+      }
+    </div>
+  </div>
+</li>

src/components/navbar/link.astro

@@ -0,0 +1,44 @@
+---
+interface Props {
+  href: string;
+  size?: "md" | "lg";
+  block?: boolean;
+  style?: "outline" | "primary" | "inverted" | "muted";
+  class?: string;
+  [x: string]: any;
+}
+
+const {
+  href,
+  block,
+  size = "lg",
+  style = "primary",
+  class: className,
+  ...rest
+} = Astro.props;
+
+const sizes = {
+  lg: "px-5 py-2.5",
+  md: "px-4 py-2",
+};
+
+const styles = {
+  outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
+  primary: "bg-black text-white hover:bg-gray-800  border-2 border-transparent",
+  inverted: "bg-white text-black   border-2 border-transparent",
+  muted: "bg-gray-100 hover:bg-gray-200   border-2 border-transparent",
+};
+---
+
+<a
+  href={href}
+  {...rest}
+  class:list={[
+    "rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200",
+    block && "w-full",
+    sizes[size],
+    styles[style],
+    className,
+  ]}
+  ><slot />
+</a>

src/components/navbar/navbar.astro

@@ -1,20 +1,125 @@
 ---
-const { lang } = Astro.params;
+import Container from "@components/container.astro";
+import Link from "./link.astro";
+import Dropdown from "./dropdown.astro";
+import { getLanguageFromURL } from '../../utils';
+import { languages } from "../../i18n/languages";
+import LanguageSelector from "../language-select"
+import { Image } from 'astro:assets';
+import Logo from '@assets/images/logo.jpg'
+const lang = getLanguageFromURL(Astro.url.toString());
+
+const menuitems = [
+
+
+  {
+    title: "LaTeX",
+    path: "/tag/latex/",
+  },
+  
+  {
+    title: "Data Science",
+    path: "/tag/data-science/",
+  },
+  {
+    title: "Python",
+    path: "/tag/python/",
+  },
+  {
+    title: "R",
+    path: "/tag/r/",
+  },
+  {
+    title: "Reference Manager",
+    path: "/tag/reference-manager/",
+  },
+/*
+  {
+    title: "More",
+    path: "#",
+    children: [
+      { title: "...", path: "/tag/.../" },
+  
+    ],
+  
+  },
+    */
+];
 ---
 
-<header class="bg-white border-b border-gray-300">
-  <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
-    <div class="flex lg:flex-1">
-      <a href=`/${typeof lang !== "undefined" ? lang : "en"}/`class="-m-1.5 p-1.5">
-        <span class="sr-only">Datanautes</span>
-        <img class="h-8 w-auto" src="/images/logo.jpg" alt="Datanautes logo">
+<Container>
+  <header
+    class="flex flex-col lg:flex-row justify-between items-center my-5"
+    x-data="{ open: false }"
+    x-init="$watch('open', value => console.log(value))">
+    <div class="flex w-full lg:w-auto items-center justify-between">
+      <a href=`/${lang}/` class="text-lg" 
+        ><Image src={Logo} alt="BehaviorCloud Logo" width="40" height="40" />
       </a>
+      <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-cloak
+              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>
     </div>
+    <nav
+      class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0"
+      :class="{ 'block': open, 'hidden': !open }"
+      x-transition>
+      <ul class="flex flex-col lg:flex-row lg:gap-3">
+        {
+          menuitems.map((item, index) => (
+            <>
+              {item.children && (
+                <Dropdown
+                lang={lang}
+                  title={item.title}
+                  children={item.children}
+                  lastItem={index === menuitems.length - 1}
+                />
+              )}
 
-
-    <div class=" lg:flex lg:flex-1 lg:justify-end">
-      <a href="https://twitter.com/datanautes/" class="text-sm font-semibold leading-6 text-gray-900">Twitter <span aria-hidden="true">&rarr;</span></a>
+              {!item.children && (
+                <li>
+                  <a
+                    href={`/${lang}${item.path}`}
+                    class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
+                    {item.title}
+                  </a>
+                </li>
+              )}
+            </>
+          ))
+        }
+      </ul>
+      <div class="lg:hidden flex items-center mt-3 gap-4">
+        <LanguageSelector lang={lang} languages={languages} client:idle/>
+        <Link Style="background:#4351e2" href="#" size="md" block>Subscription</Link>
+      </div>
+    </nav>
+    <div>
+      <div class="hidden lg:flex items-center gap-4">
+        <LanguageSelector lang={lang} languages={languages} client:idle/>
+        <Link Style="background:#4351e2" href="#" size="md">Subscription</Link>
+      </div>
     </div>
-  </nav>
-
-</header>
+  </header>
+</Container>