chore: add product dorpdown

Digitale-Lernwelten · Dec 4, 2024 · 8218352 · 8218352
1 parent 95afddf
commit 8218352
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 4 deletions.
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,16 +1,95 @@
 ---
 const pathname = new URL(Astro.request.url).pathname;
 const currentPath = pathname.slice(1); // remove the first "/"
+type DropdownItem = {
+  label: string;
+  href: string;
+  className: string;
+};
+const productItems: DropdownItem[] = [
+  { label: 'netBook Deutsch', href: 'https://netbook-deutsch.de/', className: "blue"  },
+  { label: 'eLearning Module', href: 'https://module.dilewe.de/', className: "pink" },
+];
+
 ---
 
 <nav>
 	<a class={currentPath === "" ? "active" : ""} href="/">Über uns</a>
 	<a class={currentPath === "referenzen/" ? "active" : ""} href="/referenzen/">Referenzen</a>
-	<a href="https://netbook-deutsch.de/" target="_blank">Produkte</a>
+	<!-- <a href="https://netbook-deutsch.de/" target="_blank">Produkte</a> -->
+	<div class="dropdown">
+		<button class="dropdown-trigger">
+		  Produkte
+		</button>
+		<ul class="dropdown-menu">
+		  {productItems.map((item) => (
+			<li>
+			  <a href={item.href} class={item.className} target="_blank">{item.label}</a>
+			</li>
+		  ))}
+		</ul>
+	  </div>
 	{ /* <a class={currentPath === "produkte/" ? "active" : ""} href="/produkte/">Produkte</a> */ }
 </nav>
 
 <style>
+	.dropdown {
+  		position: relative;
+  		display: inline-block;
+
+  	}
+
+  	.dropdown-trigger {
+  		background: none;
+  		border: none;
+  		cursor: pointer;
+  		font-size: inherit;
+  		color: inherit;
+		font-weight: 300;
+		z-index: -1;
+  	}
+
+  	.dropdown-menu {
+  		display: none;
+  		position: absolute;
+  		background-color: var(--nav-background);
+		border-radius: 0 0 0.5rem 0.5rem;
+  		list-style: none;
+  		padding: 1rem 0 0 0;
+  		margin: 0rem 0rem 0 0rem;
+  		z-index: -2;
+  	}
+
+  	.dropdown:hover .dropdown-menu {
+  		display: block;
+  	}
+
+  	.dropdown-menu li {
+  		padding: 1rem 0.75rem 0 0rem;
+		background-color: white;
+  	}
+	.dropdown-menu li:last-child {
+		border-radius: 0 0 0.5rem 0.5rem;
+		padding-bottom: 1rem;
+  	}
+
+  	.dropdown-menu li a {
+  		text-decoration: none;
+  		color: black;
+  		display: block;
+  	}
+
+	.blue:hover {
+		color: #2caed4 !important;
+	}
+	.pink:hover {
+		color: #FF5579 !important;
+	}
+
+
+
+
+
 	nav {
 		background: var(--nav-background);
 		position: fixed;
@@ -21,7 +100,7 @@ const currentPath = pathname.slice(1); // remove the first "/"
 		z-index: 100;
 	}
 
-	a {
+	a, .dropdown-trigger {
 		text-decoration: none;
 		color: var(--nav-text-color);
 		text-transform: uppercase;
@@ -32,6 +111,7 @@ const currentPath = pathname.slice(1); // remove the first "/"
 	a.active {
 		text-decoration: underline;;
 		text-underline-offset: 5px;
+		z-index: 100;
 	}
 
 	@media only screen and (max-width: 1000px)  {
@@ -43,8 +123,24 @@ const currentPath = pathname.slice(1); // remove the first "/"
 		}
 	}
 
+	@media only screen and (max-width: 600px)  {
+		nav {
+			width: 100%;
+			border-radius: 0;
+			text-align: center;
+			padding: 2rem 0 0.5rem;
+		}
+		a, .dropdown-trigger {
+			padding: 0 16px;
+			font-size: 1rem;
+		}
+		.dropdown-menu {
+			padding: 0.5rem 0 0 0;
+		}
+	}
+
 	@media only screen and (max-width: 500px)  {
-		a {
+		a, .dropdown-trigger {
 			padding: 0 12px;
 			font-size: 1rem;
 		}

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -101,7 +101,7 @@ const { title, bodyClass } = Astro.props;
 		line-height: 1.35em;
 	}
 
-	h1,h2,h3,h4,h5,h6 {
+	h1,h2,h3,h4,h5,h6,button {
 		font-family: Lato, system-ui, sans-serif;
 		text-transform: uppercase;
 		font-weight: 300;