AisBrandBar

Basic Example

The AisBrandBar accepts a site prop for the application name and a href or to prop for the link to the application home page.

The University of Iowa

AIS Component Library

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu/"
  >
  </AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';
</script>

<script>
export default {
  name: "AisBrandBarExample"
}
</script>

Search

The application Search link is disabled by default but can be used by using the searchable prop. The Search link emits a search-click event when clicked, allowing the developer to trigger any necessary behavior.

The University of Iowa

AIS Component Library

Search

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu/"
               searchable
               @searchClick="handleSearchClick"
  ></AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';

const handleSearchClick = () => { console.log(`handleSearchClick...`) }
</script>

<script>
export default {
  name: "AisBrandBarSearch"
}
</script>

User Menu

If your application uses authentication, the AisBandBar exposes a Boolean auth prop and a user prop. The auth prop is required to use the user menu.

Auth Prop

Once auth is set to true and prior to authentication, when the user prop is empty, a 'Sign in' link is visible. This 'Sign in' link will emit the @login event when it is clicked. Handle the event to trigger your application's authentication flow.

The University of Iowa

AIS Component Library

Sign In

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu"
               auth
  ></AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';
</script>

<script>
export default {
  name: "AisBrandBarAuth"
}
</script>

User Prop

Once the user authenticates and the user prop is populated, the user menu is displayed. The user prop accepts a String if you only want to pass the Hawk ID or a user Object, which must contain a hawkId attribute. By default, the user menu will have a Sign Out menu option which will emit a logout event when clicked.

The University of Iowa

AIS Component Library

bbrn

<template>
<!--  <div class="mb-60">-->
    <AisBrandBar site="AIS Component Library"
                 href="https://ais-components.its.uiowa.edu/"
                 auth
                 user="bbrn"
                 @logout="handleLogout"
    ></AisBrandBar>
<!--  </div>-->
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';

const handleLogout = (e) => { console.log(`handleLogout: ${e}`) }
</script>

<script>
export default {
  name: "AisBrandBarUser"
}
</script>

If you'd like to have other menu items, you can achieve this in one of two ways: using the user-menu-items prop or by using the userMenuItems slot. Either way, additional menu items will be listed above the Sign Out menu item, which will always be last in the menu.

User Menu Items Prop

The user-menu-items prop accepts an Array of JavaScript objects, representing the menu items. See AisMenu for more details on the options available.

The University of Iowa

AIS Component Library

bbrn

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu/"
               auth
               user="bbrn"
               :user-menu-items="userMenuItems"
  ></AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';

const userMenuItems = [
  { key: 'impersonate', label: 'Impersonate', icon: 'user', to: '/Impersonate' },
  {
    key: 'other',
    label: 'Other',
    icon: 'unknown',
    children: [
      { key: 'other1', label: 'Other 1' },
      { key: 'other2', label: 'Other 2' },
      { key: 'other3', label: 'Other 3' },
    ]
  },
]
</script>

User Menu Items Slot

The userMenuItems slot accepts any combination of AisMenuItem, AisMenuDivider, or AisMenuGroup components to fill out your menu. See AisMenu for more detail.

The University of Iowa

AIS Component Library

hawkId

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu/"
               auth
               user="hawkId"
  >
    <template #userMenuItems>
      <AisMenuItem label="Impersonate" icon="user"/>
      <AisMenuItem>
        <AisMenu label="Other" icon="unknown">
          <AisMenuItem label="Other 1"></AisMenuItem>
          <AisMenuItem label="Other 2"></AisMenuItem>
          <AisMenuItem label="Other 3"></AisMenuItem>
        </AisMenu>
      </AisMenuItem>
    </template>
  </AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';
import { AisMenu } from '@ais-public/ais-components';
import { AisMenuItem } from '@ais-public/ais-components';
</script>

<script>
export default {
  name: "AisBrandBarExample"
};
</script>

Complete Example

The University of Iowa

AIS Component Library

Search

bbrn

<template>
  <AisBrandBar site="AIS Component Library"
               href="https://ais-components.its.uiowa.edu/"
               searchable
               auth
               user="bbrn"
               :user-menu-items="userMenuItems"
               @searchClick="handleSearchClick"
               @logout="handleLogout"
  ></AisBrandBar>
</template>


<script setup>
import { AisBrandBar } from '@ais-public/ais-components';
import { userMenuItems } from '@/components/brand-bar/user-menu';

const handleSearchClick = () => { console.log(`handleSearchClick...`) }
const handleLogout = (e) => { console.log(`handleLogout: ${e}`) }

</script>

<script>
export default {
  name: "AisBrandBarExample"
}
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
auth	Boolean		false	Boolean prop to indicate that authentication is used in the application.	false
href	String		''	The url for the application home page	false
originalUser	Object, String		''	This is used when impersonating to keep track of the actual user.	false
searchable	Boolean		false	Whether the Search bar should be displayed in the header	false
site	String		''	The application site name	false
to	String		''	The nuxt/vue path to the application home page	false
user	Object, String		''	For the User Menu. Accepts either a String (Hawk ID) or a user object, which must include the key "hawkId"	false
userMenuItems	Array		[]	Menu items to display in the user menu (AisUserMenu)	false

Slots

Name	Scoped	Description
sitename	No	Scoped slot for custom rendering site name link
userMenuItems	No	Scoped slot for custom rendering the menu items for the user menu (AisUserMenu)

Events

Event	Arguments	Description
login	event object - Native event object	Emitted when the user clicks login
logout	event object - Native event object	Emitted when the page changes
search-click	event object - Native event object	Emitted when the search button is clicked
stopImpersonating	event object - Native event object	Emitted when the page changes