feat: creates the header main funkhaus component

package.json

@@ -33,6 +33,5 @@
   },
   "engines": {
     "pnpm": "^9.12.1"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/vue-component-library/src/lib-components/GlobalHamburger.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+
+const props = defineProps<GlobalHamburgerProps>()
+
+// Emits
+const emit = defineEmits(['toggle-menu'])
+
+// Data
+const theme = useTheme()
+
+// Props
+interface GlobalHamburgerProps {
+  isOpened: boolean
+}
+
+// Computed
+const classes = computed(() => {
+  return [
+    'global-hamburger',
+    theme?.value || '',
+    {
+      'is-opened': props.isOpened
+    }
+  ]
+})
+
+// Methods
+function onClick() {
+  emit('toggle-menu')
+}
+</script>
+
+<template>
+  <div
+    :class="classes"
+    @click="onClick"
+  >
+    <div class="hamburger-lines">
+      <span class="line line-1" />
+      <span class="line line-2" />
+      <span class="line line-3" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/styles/dlc/_global-hamburger.scss";
+</style>

packages/vue-component-library/src/lib-components/HeaderMainFunkhaus.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+// Imports
+import SvgLibraryLogo from 'ucla-library-design-tokens/assets/svgs/logo-library-digital-collections.svg'
+import { computed } from 'vue'
+import SmartLink from '@/lib-components/SmartLink.vue'
+import GlobalHamburger from '@/lib-components/GlobalHamburger.vue'
+import SiteBrandBar from '@/lib-components/SiteBrandBar.vue'
+
+import { useTheme } from '@/composables/useTheme'
+
+// Props
+interface HeaderMainFunkhausProps {
+  menuOpened: boolean
+  showSecondary: boolean
+  menuItems: any[]
+  secondaryItems: any[]
+}
+
+const props = defineProps<HeaderMainFunkhausProps>()
+
+// Emits
+const emit = defineEmits(['toggle-menu'])
+
+// Data
+const theme = useTheme()
+
+// Computed
+const classes = computed(() => {
+  return ['header-main-funkahus', theme?.value || '', { 'menu-opened': props.menuOpened }]
+})
+
+const parsedSubMenuItems = computed(() => {
+  return props.secondaryItems.map((item) => {
+    const supportUsClass = item.label?.toLowerCase() === 'support us' ? ' support-us' : ''
+
+    return {
+      ...item,
+      classes: supportUsClass
+    }
+  })
+})
+
+// Methods
+function toggleMenu() {
+  emit('toggle-menu')
+}
+
+function handleAccountButtonClick() {
+  console.log('handleAccountButtonClick')
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <SiteBrandBar class="brand-bar" />
+
+    <ul
+      v-if="showSecondary"
+      class="container-secondary show-desktop"
+    >
+      <li
+        v-for="item in parsedSubMenuItems"
+        :key="item.label"
+        class="menu-item"
+      >
+        <SmartLink
+          :to="item.to"
+          :class="item.classes"
+          class="menu-link"
+        >
+          {{ item.label }}
+        </SmartLink>
+      </li>
+
+      <button
+        class="account-button"
+        @click="handleAccountButtonClick"
+      >
+        My Account
+      </button>
+    </ul>
+    <div class="container">
+      <SmartLink
+        to="/"
+        class="ucla-dlc-logo-link"
+      >
+        <SvgLibraryLogo
+          class="ucla-dlc-logo"
+          alt="UCLA Library Digital Collections logo"
+        />
+      </SmartLink>
+
+      <ul class="header-links show-desktop">
+        <li
+          v-for="item in menuItems"
+          :key="item.label"
+          class="menu-item"
+        >
+          <SmartLink
+            :to="item.to"
+            :class="item.classes"
+            class="menu-link"
+          >
+            {{ item.label }}
+          </SmartLink>
+        </li>
+      </ul>
+
+      <GlobalHamburger
+        class="hamburger show-mobile"
+        :is-opened="menuOpened"
+        @toggle-menu="toggleMenu"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_header-main-funkahaus.scss";
+</style>

packages/vue-component-library/src/stories/HeaderMainFunkhaus.spec.js

@@ -0,0 +1,9 @@
+describe('Funkhaus / Header Main Funkhaus', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-header-main-funkhaus--default&args=&viewMode=story'
+    )
+    cy.get('.header-main-funkahus').should('exist')
+    // cy.percySnapshot('Funkhaus / Header Main Funkhaus: Default')
+  })
+})

packages/vue-component-library/src/stories/HeaderMainFunkhaus.stories.js

@@ -0,0 +1,58 @@
+import { computed, provide, ref } from 'vue'
+import HeaderMainFunkhaus from '@/lib-components/HeaderMainFunkhaus.vue'
+import SmartLink from '@/lib-components/SmartLink.vue'
+
+// Storybook default settings
+export default {
+  title: 'Funkhaus / Header Main Funkhaus',
+  component: HeaderMainFunkhaus,
+}
+
+// Variations of stories below
+export function Default() {
+  provide(() => {
+    return {
+      theme: computed(() => 'dlc'),
+    }
+  })
+
+  return {
+    components: { HeaderMainFunkhaus, SmartLink },
+    setup() {
+      const menuOpened = ref(false)
+
+      const toggleMenu = () => {
+        menuOpened.value = !menuOpened.value
+      }
+
+      const menuItems = [
+        {
+          label: 'Using digital collections content',
+          to: '/digital-collections',
+        },
+        {
+          label: 'About',
+          to: '/about',
+        },
+        {
+          label: 'Give us feedback',
+          to: '/feedback',
+        }
+      ]
+
+      return {
+        menuOpened,
+        toggleMenu,
+        menuItems
+      }
+    },
+    template: `
+      <HeaderMainFunkhaus 
+        :menu-opened="menuOpened"
+        @toggle-menu="toggleMenu"
+        :class="menuOpened ? 'menu-opened' : ''"
+        :menu-items="menuItems"
+      />
+    `,
+  }
+}

packages/vue-component-library/src/styles/dlc/_global-hamburger.scss

@@ -0,0 +1,50 @@
+.global-hamburger,
+.global-hamburger.dlc {
+    display: none;
+    cursor: pointer;
+
+    /* Breakpoints */
+    @media #{$medium} {
+        display: block;
+
+        .hamburger-lines {
+            position: relative;
+            width: 24px;
+            height: 18px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .line {
+            display: block;
+            height: 2px;
+            width: 100%;
+            background-color: var(--color-primary-blue-03);
+            border-radius: 1px;
+            transform-origin: center;
+
+            @include animate-normal;
+        }
+
+        // States
+        &.is-opened {
+            .line {
+                background-color: var(--color-white);
+            }
+
+            .line-1 {
+                transform: translateY(8px) rotate(45deg);
+            }
+
+            .line-2 {
+                opacity: 0;
+                transform: scaleX(0);
+            }
+
+            .line-3 {
+                transform: translateY(-8px) rotate(-45deg);
+            }
+        }
+    }
+}