From e8a998945ccf17ffda555374817a4f3631683f7b Mon Sep 17 00:00:00 2001 From: Jake Laderman Date: Wed, 20 Nov 2024 14:01:05 -0500 Subject: [PATCH] product dropdown improvements --- src/components/Navigation.tsx | 7 ++--- src/components/menu/Menu.tsx | 11 +++++--- src/generated/graphqlDirectus.ts | 45 +++++++++++++------------------- 3 files changed, 30 insertions(+), 33 deletions(-) diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 7c3650cd..e9c06cf4 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -43,6 +43,7 @@ export const ProductLink = forwardRef(
@@ -53,13 +54,13 @@ export const ProductLink = forwardRef(
{itemConfig?.title} {itemConfig?.description} @@ -163,6 +164,7 @@ export const MainLinkBase = styled.a.withConfig({ alignItems: 'center', gap: theme.spacing.xsmall, cursor: 'pointer', + padding: `${theme.spacing.xsmall}px ${theme.spacing.small}px `, ...(isSelected ? { color: theme.colors.text, @@ -190,7 +192,6 @@ export const MainLinkBase = styled.a.withConfig({ '.hover-arrow': { opacity: '0', }, - padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px `, })) export const SecondaryLink = styled.a(({ theme }) => ({ diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index aa61460b..bee07821 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -202,13 +202,13 @@ function MenuDropdown({ $kind={kind} className={ kind === 'product' - ? 'flex flex-col items-center gap-large lg:flex-row' + ? 'flex flex-col items-center gap-large min-[1352px]:flex-row' : '' } > {kind === 'product' && ( ({ {kind === 'product' && ( Product features )} -
    +
      {[...state.collection].map((item) => ( ({ const DropdownCardSC = styled.div<{ $kind: string }>(({ theme, $kind }) => ({ overflowX: 'hidden', overflowY: 'auto', + width: 'max-content', padding: $kind === 'product' ? theme.spacing.xlarge : `${theme.spacing.xsmall}px 0`, boxShadow: theme.boxShadows.moderate, diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts index d45a5d99..e5a3e5a5 100644 --- a/src/generated/graphqlDirectus.ts +++ b/src/generated/graphqlDirectus.ts @@ -4926,6 +4926,8 @@ export type Card = { heading: Scalars['String']['output']; id: Scalars['ID']['output']; image?: Maybe; + /** unique name to identify this card */ + name?: Maybe; url?: Maybe; user_created?: Maybe; user_updated?: Maybe; @@ -4983,6 +4985,8 @@ export type Card_Aggregated_Count = { heading?: Maybe; id?: Maybe; image?: Maybe; + /** unique name to identify this card */ + name?: Maybe; url?: Maybe; user_created?: Maybe; user_updated?: Maybe; @@ -5004,6 +5008,7 @@ export type Card_Filter = { heading?: InputMaybe; id?: InputMaybe; image?: InputMaybe; + name?: InputMaybe; url?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; @@ -5942,6 +5947,8 @@ export type Create_Card_Input = { heading: Scalars['String']['input']; id?: InputMaybe; image?: InputMaybe; + /** unique name to identify this card */ + name?: InputMaybe; url?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; @@ -6071,6 +6078,8 @@ export type Create_Custom_Component_Input = { date_updated?: InputMaybe; id?: InputMaybe; item?: InputMaybe>>; + /** unique name to identify this component */ + name?: InputMaybe; spacing_bottom?: InputMaybe; spacing_top?: InputMaybe; theme?: InputMaybe; @@ -6405,10 +6414,7 @@ export type Create_Product_Pages_Input = { dropdown_description?: InputMaybe; dropdown_icon?: InputMaybe; dropdown_title?: InputMaybe; - features?: InputMaybe>>; id?: InputMaybe; - page_subtitle?: InputMaybe; - page_title?: InputMaybe; slug: Scalars['String']['input']; status?: InputMaybe; }; @@ -6680,6 +6686,8 @@ export type Custom_Component = { id: Scalars['ID']['output']; item?: Maybe>>; item_func?: Maybe; + /** unique name to identify this component */ + name?: Maybe; spacing_bottom?: Maybe; spacing_top?: Maybe; theme?: Maybe; @@ -6737,6 +6745,8 @@ export type Custom_Component_Aggregated_Count = { date_updated?: Maybe; id?: Maybe; item?: Maybe; + /** unique name to identify this component */ + name?: Maybe; spacing_bottom?: Maybe; spacing_top?: Maybe; theme?: Maybe; @@ -6759,6 +6769,7 @@ export type Custom_Component_Filter = { id?: InputMaybe; item?: InputMaybe; item_func?: InputMaybe; + name?: InputMaybe; spacing_bottom?: InputMaybe; spacing_top?: InputMaybe; theme?: InputMaybe; @@ -8974,11 +8985,7 @@ export type Product_Pages = { dropdown_description?: Maybe; dropdown_icon?: Maybe; dropdown_title?: Maybe; - features?: Maybe>>; - features_func?: Maybe; id: Scalars['ID']['output']; - page_subtitle?: Maybe; - page_title?: Maybe; slug: Scalars['String']['output']; status?: Maybe; }; @@ -8993,16 +9000,6 @@ export type Product_PagesCustom_ComponentsArgs = { sort?: InputMaybe>>; }; - -export type Product_PagesFeaturesArgs = { - filter?: InputMaybe; - limit?: InputMaybe; - offset?: InputMaybe; - page?: InputMaybe; - search?: InputMaybe; - sort?: InputMaybe>>; -}; - export type Product_Pages_Aggregated = { __typename?: 'product_pages_aggregated'; avg?: Maybe; @@ -9023,10 +9020,7 @@ export type Product_Pages_Aggregated_Count = { dropdown_description?: Maybe; dropdown_icon?: Maybe; dropdown_title?: Maybe; - features?: Maybe; id?: Maybe; - page_subtitle?: Maybe; - page_title?: Maybe; slug?: Maybe; status?: Maybe; }; @@ -9107,11 +9101,7 @@ export type Product_Pages_Filter = { dropdown_description?: InputMaybe; dropdown_icon?: InputMaybe; dropdown_title?: InputMaybe; - features?: InputMaybe; - features_func?: InputMaybe; id?: InputMaybe; - page_subtitle?: InputMaybe; - page_title?: InputMaybe; slug?: InputMaybe; status?: InputMaybe; }; @@ -10462,6 +10452,8 @@ export type Update_Card_Input = { heading?: InputMaybe; id?: InputMaybe; image?: InputMaybe; + /** unique name to identify this card */ + name?: InputMaybe; url?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; @@ -10591,6 +10583,8 @@ export type Update_Custom_Component_Input = { date_updated?: InputMaybe; id?: InputMaybe; item?: InputMaybe>>; + /** unique name to identify this component */ + name?: InputMaybe; spacing_bottom?: InputMaybe; spacing_top?: InputMaybe; theme?: InputMaybe; @@ -10935,10 +10929,7 @@ export type Update_Product_Pages_Input = { dropdown_description?: InputMaybe; dropdown_icon?: InputMaybe; dropdown_title?: InputMaybe; - features?: InputMaybe>>; id?: InputMaybe; - page_subtitle?: InputMaybe; - page_title?: InputMaybe; slug?: InputMaybe; status?: InputMaybe; };