Merge pull request #19 from TYPO3incubator/feature/logo-nav-header-pa…

…rtials Draft: [TASK] Create header with logo and navigation
TYPO3incubator · Apr 11, 2024 · fe1ab03 · fe1ab03
2 parents 27fadbd + e7734bd
commit fe1ab03
Show file tree

Hide file tree

Showing 11 changed files with 217 additions and 25 deletions.
diff --git a/assets/js/mobile-navigation.js b/assets/js/mobile-navigation.js
@@ -0,0 +1,37 @@
+function toggleMobileNavigation() {
+  const hamburgerMenus = document.querySelectorAll(".hamburger-menu-button");
+  const navs = document.querySelectorAll(".navigation");
+
+  hamburgerMenus.forEach((menu) => {
+    const open = menu.querySelector('.hamburger-menu-open');
+    const close = menu.querySelector('.hamburger-menu-close');
+
+    // Function to update icon visibility based on the 'active' state of navigation
+    function updateIconVisibility() {
+      navs.forEach((nav) => {
+        const isActive = nav.classList.contains("active");
+        if (open && close) {
+          open.classList.toggle('hidden', isActive);
+          close.classList.toggle('hidden', !isActive);
+        }
+      });
+    }
+
+    // Attach event listener if not already initialized
+    if (!menu.dataset.initialized) {
+      menu.addEventListener("click", function() {
+        // Toggle 'active' class on all navigation elements
+        navs.forEach((nav) => nav.classList.toggle("active"));
+        updateIconVisibility();
+      });
+
+      // Mark this menu as initialized
+      menu.dataset.initialized = "true";
+    }
+
+    // Initial update of icon visibility based on the current 'active' state
+    updateIconVisibility();
+  });
+}
+
+toggleMobileNavigation();
diff --git a/assets/scss/base/_global.scss b/assets/scss/base/_global.scss
@@ -79,4 +79,31 @@ html {
     .background-black {
         @apply bg-black text-white;
     }
-}
+
+    .navigation {
+        @apply  static lg:block lg:visible lg:opacity-100;
+        &.active {
+            @apply transition-all opacity-100 bg-white visible fixed z-50 top-0 left-0 w-full h-svh;
+            & ul {
+                @apply flex flex-col gap-2;
+            }
+            & .hamburger-menu-button {
+                @apply absolute top-3 right-2 z-50
+            }
+        }
+        & ul {
+            @apply hidden lg:flex;
+        }
+    }
+
+    .form-control {
+        @apply bg-white shadow appearance-none rounded w-full py-2 px-3 text-black leading-tight focus:outline-none focus:ring-2
+    }
+
+    .form-checkbox {
+        @apply rounded h-5 w-5 accent-secondary-500;
+    }
+    .form-radio {
+        @apply h-5 w-5 accent-secondary-500;
+    }
+}
diff --git a/local_packages/success/Configuration/Sets/ProductLaunch/settings.yaml b/local_packages/success/Configuration/Sets/ProductLaunch/settings.yaml
@@ -1,23 +1,27 @@
 ui:
   theme: "system"
-  default:
+  name: "Surfboard Company"
+  layout:
+    navigation:
+      position: "below"
+      isVisible: true
+    radius: "5px"
+    rotate: "3deg"
     font:
       text: "Roboto, sans-serif"
       heading: "Roboto, sans-serif"
+  light:
     color:
       primary: "rgb(235, 183, 35)"
       secondary: "rgb(94, 13, 25)"
       light: "rgb(255, 249, 232)"
       primarytext: "black"
       secondarytext: "white"
       lighttext: "black"
-    setting:
-      radius: "5px"
-      rotate: "3deg"
-      name: 'Surfboard Company'
   dark:
     font: []
     color:
       primary: "rgb(235, 183, 35)"
       secondary: "rgb(94, 13, 25)"
       light: "rgb(255, 249, 232)"
+
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Pages/Default.html
@@ -5,7 +5,8 @@
     xmlns:s="http://typo3.org/ns/Surfcamp/Success/ViewHelpers"
 >
     <f:asset.css identifier="theme-settings">
-        <s:themeVariablesProvider variables="{settings.ui.default}" />
+        <s:themeVariablesProvider variables="{settings.ui.layout}" />
+        <s:themeVariablesProvider variables="{settings.ui.light}" />
         <s:themeVariablesProvider variables="{settings.ui.dark}" selector=".dark" />
     </f:asset.css>
 
@@ -23,6 +24,7 @@
                 </div>
             </div>
         </div>
+
         <f:render partial="Julia" />
         <div style="display:none">
             <div id="c1">

diff --git a/...kages/success/Resources/Private/Templates/ProductLaunch/Partials/HamburgerMenuButton.html b/...kages/success/Resources/Private/Templates/ProductLaunch/Partials/HamburgerMenuButton.html
@@ -0,0 +1,11 @@
+<button
+    class="hamburger-menu-button lg:hidden ml-auto h-5"
+    title="Menu"
+>
+    <span aria-hidden="true" class="hamburger-menu-open w-5 flex flex-col justify-between gap-1">
+        <span class="block h-1 w-full bg-black"></span>
+        <span class="block h-1 w-full bg-black"></span>
+        <span class="block h-1 w-full bg-black"></span>
+    </span>
+    <span aria-hidden="true" class="hamburger-menu-close hidden">&#10006;</span>
+</button>
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Header.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Header.html
@@ -0,0 +1,38 @@
+<vac:asset.vite entry="assets/js/mobile-navigation.js"/>
+
+<header class="absolute top-0 left-0 z-50 w-full">
+    <f:if condition="{settings.ui.layout.navigation.position} == 'below'">
+    <f:then>
+        <div class="w-full px-5 py-3 lg:block flex items-center justify-between gap-2">
+            <f:render partial="Logo" />
+
+            <f:if condition="{settings.ui.layout.navigation.isVisible}">
+                <f:then>
+                    <div class="mt-2 text-black">
+                        <f:render partial="Navigation" />
+                    </div>
+                </f:then>
+            </f:if>
+        </div>
+    </f:then>
+
+    <f:else>
+        <div class="relative">
+            <div class="w-full absolute top-0 left-0 z-10">
+                <div class="px-5 text-black py-3">
+                    <div class="flex justify-between items-center gap-2">
+                        <f:render partial="Logo" />
+
+                        <f:if condition="{settings.ui.layout.navigation.isVisible}">
+                            <f:then>
+                                <f:render partial="Navigation" />
+                            </f:then>
+                        </f:if>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </f:else>
+</f:if>
+
+</header>
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Julia.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Julia.html
@@ -1,21 +1,24 @@
-<div class="relative">
-    <div class="w-full absolute top-0 left-0 z-10">
-        <div class="container px-5 mx-auto text-black py-3">
-            <div class="flex justify-between">
-                <div>
-                    Logo
+<div class="background-black relative min-h-screen flex items-center">
+    <f:render partial="Header" arguments="{ settings: settings }"/>
+
+    <img alt="ALT_TEXT" class="object-cover w-full h-full brightness-50 absolute top-0 left-0" src="https://picsum.photos/1600/900" />
+    <div class="container px-5 py-12 mx-auto z-10 relative">
+        <div class="grid gap-5 md:grid-cols-2">
+            <div>
+                <div class="h1 mb-3">Customize your own surfboard</div>
+                <div>Lorem ipsum dolor sit amet</div>
+                <div class="mt-5">
+                    <a href="#" class="btn btn-primary">Upload your design</a>
                 </div>
-                <nav>
-                    <a href="#" class="font-bold text-lg uppercase p-2 m-1 transition-colors hover:text-primary-500 focus:text-primary-500">Menu 1</a>
-                    <a href="#" class="font-bold text-lg uppercase p-2 m-1 transition-colors hover:text-primary-500 focus:text-primary-500">Menu 2</a>
-                    <a href="#" class="font-bold text-lg uppercase p-2 m-1 transition-colors hover:text-primary-500 focus:text-primary-500">Menu 3</a>
-                </nav>
             </div>
         </div>
     </div>
 </div>
-<div class="background-light py-12 min-h-screen flex items-center">
-    <div class="container px-5 mx-auto">
+
+<div class="background-light relative pb-12 min-h-screen flex items-center">
+    <f:render partial="Header" arguments="{ settings: settings }"/>
+
+    <div class="container px-5 mx-auto mt-[6rem]">
         <div class="grid gap-5 md:grid-cols-2">
             <div class="flex items-center">
                 <div>
@@ -234,6 +237,55 @@
     <div class="container px-5 mx-auto">
         <div class="h2">Contact Form</div>
 
+        <fieldset>
+            <label>
+                Input type text
+                <input class="form-control" id="text" type="text">
+            </label>
+
+            <label>
+                Input type url
+                <input class="form-control" id="url" type="url">
+            </label>
+
+            <label>
+                Input type email
+                <input class="form-control" id="email" type="email">
+            </label>
+
+            <label class="block">
+                Input type number
+                <input class="form-control" id="number" type="number">
+            </label>
+
+            <label class="block">
+                Input type date
+                <input class="form-control" id="date" type="date">
+            </label>
+
+            <label class="block">
+                Input type tel
+                <input class="form-control" id="tel" type="tel">
+            </label>
+
+
+            <label class="flex gap-2 items-center">
+                <input type="checkbox" class="form-checkbox" id="checkbox" type="text" />
+                Input type checkbox
+            </label>
+
+            <label class="flex gap-2 items-center">
+                <input type="radio" class="form-radio" id="radio" type="text" />
+                Input type radio
+            </label>
+
+            <label for="story" class="block">
+                Tell us your story:
+                <textarea id="story" name="story" rows="5" cols="4" class="form-control"></textarea>
+            </label>
+
+        </fieldset>
+
         <div class="mt-8">
         </div>
     </div>
@@ -268,5 +320,5 @@
 </div>
 
 <footer class="py-5 container px-5 mx-auto">
-    &copy; {settings.ui.default.setting.name} {f:format.date(format: '%Y', date:'now')}
+    &copy; {settings.ui.name} {f:format.date(format: '%Y', date:'now')}
 </footer>
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Logo.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Logo.html
@@ -0,0 +1,3 @@
+<a href="#" title="Home" class="inline-block min-w-24">
+    <img alt="ALT_TEXT" class="w-32 h-auto" src="https://picsum.photos/200/100" />
+</a>
diff --git a/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Navigation.html b/local_packages/success/Resources/Private/Templates/ProductLaunch/Partials/Navigation.html
@@ -0,0 +1,7 @@
+
+<nav class="navigation">
+    <!-- lg:bg-transparent lg:h-auto lg:static lg:w-auto -->
+    <f:render partial="NavigationLinks" />
+
+    <f:render partial="HamburgerMenuButton" />
+</nav>
diff --git a/..._packages/success/Resources/Private/Templates/ProductLaunch/Partials/NavigationLinks.html b/..._packages/success/Resources/Private/Templates/ProductLaunch/Partials/NavigationLinks.html
@@ -0,0 +1,11 @@
+<ul class="flex gap-4 items-center">
+    <li class="p-2 lg:pl-0 m-1 lg:ml-0">
+      <a href="#" class="font-bold text-lg uppercase  transition-colors hover:text-primary-500 focus:text-primary-500">Menu 1</a>
+    </li>
+    <li class="p-2 m-1">
+      <a href="#" class="font-bold text-lg uppercase p-2 m-1 transition-colors hover:text-primary-500 focus:text-primary-500">Menu 2</a>
+    </li>
+    <li class="p-2 m-1">
+      <a href="#" class="font-bold text-lg uppercase p-2 m-1 transition-colors hover:text-primary-500 focus:text-primary-500">Menu 3</a>
+    </li>
+  </ul>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,12 +8,12 @@ export default {
       heading: ['var(--font-heading)'],
     },
     borderRadius: {
-      DEFAULT: 'var(--setting-radius)',
+      DEFAULT: 'var(--radius)',
       'full': '999px'
     },
     rotate: {
-      right: 'var(--setting-rotate)',
-      left: 'calc(var(--setting-rotate) * (-1))'
+      right: 'var(--rotate)',
+      left: 'calc(var(--rotate) * (-1))'
     },
     colors: {
       black: 'black',
@@ -43,4 +43,4 @@ export default {
     },
     extend: {},
   },
-}
+}