@contentful/f36-navbar 5.0.0-alpha.3 → 5.0.0-alpha.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.mdx +2 -7
  2. package/dist/esm/index.js +12 -11
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +61 -61
  5. package/dist/index.d.ts +61 -61
  6. package/dist/index.js +12 -29
  7. package/dist/index.js.map +1 -1
  8. package/package.json +9 -7
package/dist/index.d.mts CHANGED
@@ -1,63 +1,76 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
2
  import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
3
- import React from 'react';
3
+ import React, { ReactNode } from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
6
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
7
  /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
8
+ * Accepts a React Component that will be displayed
9
+ * instead of the Contentful Logo
16
10
  */
17
- bottomRightItems?: React.ReactNode;
18
- /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
21
- */
22
- topRightItems?: React.ReactNode;
11
+ logo?: React.ReactNode;
12
+ /** Promotions component, displayed on most left side */
13
+ promotions?: React.ReactNode;
14
+ /** Environment Switcher component */
15
+ switcher?: React.ReactNode;
16
+ /** Main Navigation Elements */
17
+ mainNavigation?: React.ReactNode;
18
+ /** Secondary Navigation Elements, displayed in the right side */
19
+ secondaryNavigation?: React.ReactNode;
20
+ /** User Account Component */
21
+ account?: React.ReactNode;
22
+ /** Navigation displayed on mobile versions */
23
+ mobileNavigation?: React.ReactNode;
23
24
  /**
24
25
  * Defines the max-width of the content inside the navbar.
25
26
  * @default '100%'
26
27
  */
27
28
  contentMaxWidth?: string;
29
+ /**
30
+ * Describes the size variation of the Navbar
31
+ * Variant wide will set the contentMaxWidth to 1524px
32
+ */
33
+ variant?: 'wide' | 'fullscreen';
28
34
  };
29
35
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
36
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
37
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
38
  /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
39
+ * Accepts a React Component that will be displayed
40
+ * instead of the Contentful Logo
41
41
  */
42
- bottomRightItems?: React.ReactNode;
43
- /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
46
- */
47
- topRightItems?: React.ReactNode;
42
+ logo?: React.ReactNode;
43
+ /** Promotions component, displayed on most left side */
44
+ promotions?: React.ReactNode;
45
+ /** Environment Switcher component */
46
+ switcher?: React.ReactNode;
47
+ /** Main Navigation Elements */
48
+ mainNavigation?: React.ReactNode;
49
+ /** Secondary Navigation Elements, displayed in the right side */
50
+ secondaryNavigation?: React.ReactNode;
51
+ /** User Account Component */
52
+ account?: React.ReactNode;
53
+ /** Navigation displayed on mobile versions */
54
+ mobileNavigation?: React.ReactNode;
48
55
  /**
49
56
  * Defines the max-width of the content inside the navbar.
50
57
  * @default '100%'
51
58
  */
52
59
  contentMaxWidth?: string;
60
+ /**
61
+ * Describes the size variation of the Navbar
62
+ * Variant wide will set the contentMaxWidth to 1524px
63
+ */
64
+ variant?: 'wide' | 'fullscreen';
53
65
  } & React.RefAttributes<HTMLElement>>;
54
66
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
67
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
68
  children: React.ReactNode;
57
69
  username: string;
58
70
  avatar?: string;
59
71
  initials?: string;
60
72
  hasNotification?: boolean;
73
+ label?: string;
61
74
  /**
62
75
  * @default 'warning'
63
76
  */
@@ -75,11 +88,13 @@ declare type NavbarMenuProps = {
75
88
 
76
89
  declare type NavbarItemIconProps = {
77
90
  icon: React.ReactElement<IconProps>;
78
- } & Pick<IconProps, 'variant'>;
91
+ className?: string;
92
+ } & Partial<Pick<IconProps, 'isActive'>>;
79
93
 
80
94
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
81
95
  declare type NavbarItemTriggerProps = CommonProps & {
82
- title: string;
96
+ label?: string;
97
+ title?: string;
83
98
  icon?: NavbarItemIconProps['icon'];
84
99
  isActive?: boolean;
85
100
  as?: React.ElementType;
@@ -112,43 +127,31 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
112
127
  ariaLabel?: string;
113
128
  }) => JSX.Element;
114
129
 
115
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
116
- children?: React.ReactNode;
117
- /**
118
- * Will be displayed instead of the default Contentful logo
119
- */
120
- logo?: React.ReactNode;
130
+ declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "ariaLabel" | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
131
+ children: ReactNode;
132
+ isCircle?: boolean;
133
+ envVariant?: 'master' | 'non-master';
134
+ isAlias?: boolean;
135
+ ariaLabel?: string;
121
136
  } & React.RefAttributes<HTMLButtonElement>>;
122
137
 
123
138
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
124
139
  estimatedWidth: number;
125
140
  }) => JSX.Element;
126
141
 
127
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
128
-
129
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
130
- children?: React.ReactNode;
131
- isCircle?: boolean;
132
- envVariant?: 'master' | 'non-master';
133
- isAlias?: boolean;
134
- } & React.RefAttributes<HTMLLIElement>>;
135
-
136
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
137
- children: React.ReactNode;
138
- } & React.RefAttributes<HTMLButtonElement>>;
139
-
140
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
142
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
141
143
  declare type NavbarBadgeOwnProps = CommonProps & {
142
144
  children?: React.ReactNode;
143
145
  as?: React.ElementType;
144
146
  };
145
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
147
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
146
148
 
147
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
148
- declare type NavbarTopbarItemOwnProps = CommonProps & {
149
+ declare type NavbarSubmenuProps = {
150
+ title: string;
151
+ icon?: NavbarItemIconProps['icon'];
149
152
  children?: React.ReactNode;
150
- };
151
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
153
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
154
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
152
155
 
153
156
  declare type CompoundNavbar = typeof Navbar$1 & {
154
157
  Item: typeof NavbarItem;
@@ -157,15 +160,12 @@ declare type CompoundNavbar = typeof Navbar$1 & {
157
160
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
158
161
  MenuDivider: typeof MenuDivider;
159
162
  MenuSectionTitle: typeof MenuSectionTitle;
163
+ Submenu: typeof NavbarSubmenu;
160
164
  Switcher: typeof NavbarSwitcher;
161
165
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
162
- SwitcherItem: typeof NavbarSwitcherItem;
163
- Search: typeof NavbarSearch;
164
- Help: typeof NavbarHelp;
165
166
  Account: typeof NavbarAccount;
166
167
  AccountSkeleton: typeof NavbarAccountSkeleton;
167
168
  Badge: typeof NavbarBadge;
168
- TopbarItem: typeof NavbarTopbarItem;
169
169
  };
170
170
  declare const Navbar: CompoundNavbar;
171
171
 
package/dist/index.d.ts CHANGED
@@ -1,63 +1,76 @@
1
1
  import { MenuListProps, MenuProps, MenuItemProps, MenuDivider, MenuSectionTitle } from '@contentful/f36-menu';
2
2
  import { CommonProps, PolymorphicComponent, ExpandProps } from '@contentful/f36-core';
3
- import React from 'react';
3
+ import React, { ReactNode } from 'react';
4
4
  import { IconProps } from '@contentful/f36-icons';
5
5
 
6
6
  declare type NavbarOwnProps = CommonProps & {
7
- children?: React.ReactNode;
8
- account?: React.ReactNode;
9
- search?: React.ReactNode;
10
- switcher?: React.ReactNode;
11
- help?: React.ReactNode;
12
- badge?: React.ReactNode;
13
7
  /**
14
- * Items that will be rendered on the bottom-right of the navbar.
15
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
8
+ * Accepts a React Component that will be displayed
9
+ * instead of the Contentful Logo
16
10
  */
17
- bottomRightItems?: React.ReactNode;
18
- /**
19
- * Items that will be rendered on the top-right of the navbar.
20
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
21
- */
22
- topRightItems?: React.ReactNode;
11
+ logo?: React.ReactNode;
12
+ /** Promotions component, displayed on most left side */
13
+ promotions?: React.ReactNode;
14
+ /** Environment Switcher component */
15
+ switcher?: React.ReactNode;
16
+ /** Main Navigation Elements */
17
+ mainNavigation?: React.ReactNode;
18
+ /** Secondary Navigation Elements, displayed in the right side */
19
+ secondaryNavigation?: React.ReactNode;
20
+ /** User Account Component */
21
+ account?: React.ReactNode;
22
+ /** Navigation displayed on mobile versions */
23
+ mobileNavigation?: React.ReactNode;
23
24
  /**
24
25
  * Defines the max-width of the content inside the navbar.
25
26
  * @default '100%'
26
27
  */
27
28
  contentMaxWidth?: string;
29
+ /**
30
+ * Describes the size variation of the Navbar
31
+ * Variant wide will set the contentMaxWidth to 1524px
32
+ */
33
+ variant?: 'wide' | 'fullscreen';
28
34
  };
29
35
  declare type NavbarHTMLElementProps = Pick<React.ComponentPropsWithoutRef<'div'>, 'id'>;
30
36
  declare type NavbarProps = NavbarHTMLElementProps & NavbarOwnProps;
31
37
  declare const Navbar$1: React.ForwardRefExoticComponent<NavbarHTMLElementProps & CommonProps & {
32
- children?: React.ReactNode;
33
- account?: React.ReactNode;
34
- search?: React.ReactNode;
35
- switcher?: React.ReactNode;
36
- help?: React.ReactNode;
37
- badge?: React.ReactNode;
38
38
  /**
39
- * Items that will be rendered on the bottom-right of the navbar.
40
- * Useful for separating other navigation items from main ones, (e.g. separating "Settings" from all other navigation items).
39
+ * Accepts a React Component that will be displayed
40
+ * instead of the Contentful Logo
41
41
  */
42
- bottomRightItems?: React.ReactNode;
43
- /**
44
- * Items that will be rendered on the top-right of the navbar.
45
- * Useful for providing additional context or actions to the user (e.g. a Feedback form link).
46
- */
47
- topRightItems?: React.ReactNode;
42
+ logo?: React.ReactNode;
43
+ /** Promotions component, displayed on most left side */
44
+ promotions?: React.ReactNode;
45
+ /** Environment Switcher component */
46
+ switcher?: React.ReactNode;
47
+ /** Main Navigation Elements */
48
+ mainNavigation?: React.ReactNode;
49
+ /** Secondary Navigation Elements, displayed in the right side */
50
+ secondaryNavigation?: React.ReactNode;
51
+ /** User Account Component */
52
+ account?: React.ReactNode;
53
+ /** Navigation displayed on mobile versions */
54
+ mobileNavigation?: React.ReactNode;
48
55
  /**
49
56
  * Defines the max-width of the content inside the navbar.
50
57
  * @default '100%'
51
58
  */
52
59
  contentMaxWidth?: string;
60
+ /**
61
+ * Describes the size variation of the Navbar
62
+ * Variant wide will set the contentMaxWidth to 1524px
63
+ */
64
+ variant?: 'wide' | 'fullscreen';
53
65
  } & React.RefAttributes<HTMLElement>>;
54
66
 
55
- declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
67
+ declare const NavbarAccount: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | "children" | keyof CommonProps | "username" | "avatar" | "initials" | "hasNotification" | "notificationVariant"> & CommonProps & {
56
68
  children: React.ReactNode;
57
69
  username: string;
58
70
  avatar?: string;
59
71
  initials?: string;
60
72
  hasNotification?: boolean;
73
+ label?: string;
61
74
  /**
62
75
  * @default 'warning'
63
76
  */
@@ -75,11 +88,13 @@ declare type NavbarMenuProps = {
75
88
 
76
89
  declare type NavbarItemIconProps = {
77
90
  icon: React.ReactElement<IconProps>;
78
- } & Pick<IconProps, 'variant'>;
91
+ className?: string;
92
+ } & Partial<Pick<IconProps, 'isActive'>>;
79
93
 
80
94
  declare const NAVBAR_ITEM_DEFAULT_TAG = "button";
81
95
  declare type NavbarItemTriggerProps = CommonProps & {
82
- title: string;
96
+ label?: string;
97
+ title?: string;
83
98
  icon?: NavbarItemIconProps['icon'];
84
99
  isActive?: boolean;
85
100
  as?: React.ElementType;
@@ -112,43 +127,31 @@ declare const NavbarMenuItemSkeleton: ({ ariaLabel, }: {
112
127
  ariaLabel?: string;
113
128
  }) => JSX.Element;
114
129
 
115
- declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "logo"> & CommonProps & {
116
- children?: React.ReactNode;
117
- /**
118
- * Will be displayed instead of the default Contentful logo
119
- */
120
- logo?: React.ReactNode;
130
+ declare const NavbarSwitcher: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps | "ariaLabel" | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
131
+ children: ReactNode;
132
+ isCircle?: boolean;
133
+ envVariant?: 'master' | 'non-master';
134
+ isAlias?: boolean;
135
+ ariaLabel?: string;
121
136
  } & React.RefAttributes<HTMLButtonElement>>;
122
137
 
123
138
  declare const NavbarSwitcherSkeleton: ({ estimatedWidth, }: {
124
139
  estimatedWidth: number;
125
140
  }) => JSX.Element;
126
141
 
127
- declare const NavbarSearch: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, keyof CommonProps> & CommonProps & React.RefAttributes<HTMLButtonElement>>;
128
-
129
- declare const NavbarSwitcherItem: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>>, never>, "children" | keyof CommonProps | "isCircle" | "envVariant" | "isAlias"> & CommonProps & {
130
- children?: React.ReactNode;
131
- isCircle?: boolean;
132
- envVariant?: 'master' | 'non-master';
133
- isAlias?: boolean;
134
- } & React.RefAttributes<HTMLLIElement>>;
135
-
136
- declare const NavbarHelp: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "children" | keyof CommonProps> & CommonProps & {
137
- children: React.ReactNode;
138
- } & React.RefAttributes<HTMLButtonElement>>;
139
-
140
- declare const NAVBAR_BADGE_DEFAULT_TAG$1 = "div";
142
+ declare const NAVBAR_BADGE_DEFAULT_TAG = "div";
141
143
  declare type NavbarBadgeOwnProps = CommonProps & {
142
144
  children?: React.ReactNode;
143
145
  as?: React.ElementType;
144
146
  };
145
- declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG$1>;
147
+ declare const NavbarBadge: PolymorphicComponent<ExpandProps<NavbarBadgeOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
146
148
 
147
- declare const NAVBAR_BADGE_DEFAULT_TAG = "button";
148
- declare type NavbarTopbarItemOwnProps = CommonProps & {
149
+ declare type NavbarSubmenuProps = {
150
+ title: string;
151
+ icon?: NavbarItemIconProps['icon'];
149
152
  children?: React.ReactNode;
150
- };
151
- declare const NavbarTopbarItem: PolymorphicComponent<ExpandProps<NavbarTopbarItemOwnProps>, typeof NAVBAR_BADGE_DEFAULT_TAG>;
153
+ } & Pick<MenuListProps, 'testId'> & Pick<MenuProps, 'onOpen' | 'onClose'>;
154
+ declare const NavbarSubmenu: (props: NavbarSubmenuProps) => JSX.Element;
152
155
 
153
156
  declare type CompoundNavbar = typeof Navbar$1 & {
154
157
  Item: typeof NavbarItem;
@@ -157,15 +160,12 @@ declare type CompoundNavbar = typeof Navbar$1 & {
157
160
  MenuItemSkeleton: typeof NavbarMenuItemSkeleton;
158
161
  MenuDivider: typeof MenuDivider;
159
162
  MenuSectionTitle: typeof MenuSectionTitle;
163
+ Submenu: typeof NavbarSubmenu;
160
164
  Switcher: typeof NavbarSwitcher;
161
165
  SwitcherSkeleton: typeof NavbarSwitcherSkeleton;
162
- SwitcherItem: typeof NavbarSwitcherItem;
163
- Search: typeof NavbarSearch;
164
- Help: typeof NavbarHelp;
165
166
  Account: typeof NavbarAccount;
166
167
  AccountSkeleton: typeof NavbarAccountSkeleton;
167
168
  Badge: typeof NavbarBadge;
168
- TopbarItem: typeof NavbarTopbarItem;
169
169
  };
170
170
  declare const Navbar: CompoundNavbar;
171
171