Prime Community Forum

Posted: **09 Aug 2022, 10:55**

Hi,

I've baught primeBlock and trying to get started with some template(the Dim Sidebar with Topbar). Globally it works fine, but there is just one thing that doesn't work: In the sidebar layouts, when I display the menu in mobile version, no way to close it.

I've noticed that there are some "[hideOnOutsideClick]="true" elements, and I found they are from the primeng/styleclass
I imported the module, no errors anymore, but the menu is still not closing.

Is there some documentation about this? I wasn't able to find anything? Is there something I should initialize, or some component I should place in the appComponent?

Here are the imported modules:

Code: Select all

    CommonModule,
    ReactiveFormsModule,
    UiModule,
    TranslateModule,
    CardModule,
    StepsModule,
    ProgressSpinnerModule,
    PasswordModule,
    InputNumberModule,
    ButtonModule,
    MessagesModule,
    MessageModule,
    SkeletonModule,
    ToastModule,
    DialogModule,
    TableModule,
    ListboxModule,
    InputTextModule,
    StyleClassModule,
    RippleModule,
    BadgeModule,
    AvatarModule,

And here is the component I adapted from the example:

Code: Select all

<div class="min-h-screen flex surface-ground">
  <div class="flex flex-column flex-auto">
    <!-- Header -->
    <div
      class="flex justify-content-between align-items-center px-5 shadow-2 relative lg:static surface-border bg-primary">
      <div class="flex">
        <a
          pRipple
          class="cursor-pointer block lg:hidden text-50 mr-3"
          pStyleClass="#app-sidebar-2"
          enterClass="hidden"
          enterActiveClass="fadeinleft"
          leaveToClass="hidden"
          leaveActiveClass="fadeoutleft"
          [hideOnOutsideClick]="true">
          <div class="flex align-items-center h-full">
            <i class="fa-light fa-bars text-2xl"></i>
          </div>
        </a>
        <div class="flex align-items-center bg-primary flex-shrink-0" style="height: 60px">
          <img src="assets/images/some-logo-white.svg" alt="Image" height="30" />
        </div>
      </div>
      <a
        pRipple
        class="cursor-pointer block lg:hidden text-50"
        pStyleClass="@next"
        enterClass="hidden"
        enterActiveClass="fadein"
        leaveToClass="hidden"
        leaveActiveClass="fadeout"
        [hideOnOutsideClick]="true">
        <i class="fa-light fa-ellipsis-vertical text-2xl"></i>
      </a>
      <ul
        class="list-none p-0 m-0 hidden lg:flex lg:align-items-center select-none lg:flex-row border-1 lg:border-none surface-border right-0 top-100 z-1 shadow-2 lg:shadow-none absolute lg:static surface-section lg:bg-primary">
        <li>
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center text-50 text-color hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors">
            <i class="fa-light fa-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
            <span class="block lg:hidden font-medium">Inbox</span>
          </a>
        </li>
        <li>
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center text-50 text-color hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors">
            <i class="fa-light fa-bell text-base lg:text-2xl mr-2 lg:mr-0" pBadge severity="danger"></i>
            <span class="block lg:hidden font-medium">Notifications</span>
          </a>
        </li>
        <li class="border-top-1 lg:border-top-none">
          <a
            pRipple
            class="flex p-3 lg:px-3 lg:py-2 align-items-center  hover:surface-100 font-medium border-round cursor-pointer transition-duration-150 transition-colors">
            <p-avatar
              image="https://faces-img.xcdn.link/thumb-lorem-face-1598_thumb.jpg"
              styleClass="mr-2"
              shape="circle"></p-avatar>
            <div class="block lg:hidden">
              <div class="text-900 font-medium">Josephine Lillard</div>
              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <!-- Bottom part-->
    <div class="flex h-full">
      <!-- Menu-->
      <div
        id="app-sidebar-2"
        class="bg-bluegray-800 h-full hidden lg:block flex-shrink-0 fixed lg:sticky z-1 select-none shadow-2"
        style="width: 280px">
        <div class="overflow-y-auto mt-3">
          <ul class="list-none p-3 m-0">
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-house mr-2"></i>
                <span class="font-medium">Dashboard</span>
              </a>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-bookmark mr-2"></i>
                <span class="font-medium">Bookmarks</span>
              </a>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors"
                pStyleClass="@next"
                enterClass="hidden"
                enterActiveClass="slidedown"
                leaveToClass="hidden"
                leaveActiveClass="slideup">
                <i class="fa-light fa-chart-line mr-2"></i>
                <span class="font-medium">Reports</span>
                <i class="fa-light fa-chevron-down ml-auto"></i>
              </a>
              <ul
                class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
                <li>
                  <a
                    pRipple
                    class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors"
                    pStyleClass="@next"
                    enterClass="hidden"
                    enterActiveClass="slidedown"
                    leaveToClass="hidden"
                    leaveActiveClass="slideup">
                    <i class="fa-light fa-chart-line mr-2"></i>
                    <span class="font-medium">Revenue</span>
                    <i class="fa-light fa-chevron-down ml-auto"></i>
                  </a>
                  <ul
                    class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
                    <li>
                      <a
                        pRipple
                        class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                        <i class="fa-light fa-table mr-2"></i>
                        <span class="font-medium">View</span>
                      </a>
                    </li>
                    <li>
                      <a
                        pRipple
                        class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                        <i class="fa-light fa-magnifying-glass mr-2"></i>
                        <span class="font-medium">Search</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a
                    pRipple
                    class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                    <i class="fa-light fa-chart-line mr-2"></i>
                    <span class="font-medium">Expenses</span>
                  </a>
                </li>
              </ul>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-users mr-2"></i>
                <span class="font-medium">Team</span>
              </a>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-comments mr-2"></i>
                <span class="font-medium">Messages</span>
                <span
                  class="inline-flex align-items-center justify-content-center ml-auto bg-yellow-500 text-bluegray-900 border-circle"
                  style="min-width: 1.5rem; height: 1.5rem"
                  >3</span
                >
              </a>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-calendar mr-2"></i>
                <span class="font-medium">Calendar</span>
              </a>
            </li>
            <li>
              <a
                pRipple
                class="flex align-items-center cursor-pointer p-3 hover:bg-bluegray-900 border-round text-bluegray-100 hover:text-bluegray-50 transition-duration-150 transition-colors">
                <i class="fa-light fa-cog mr-2"></i>
                <span class="font-medium">Settings</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- Body-->
      <div class="p-5 flex flex-column flex-auto">
        <div class="border-2 border-dashed surface-border border-round surface-section flex-auto">content</div>
      </div>
    </div>
  </div>
</div>

The live demo work, but as soon i extract it from the NgPrime app, it doesn't, what am I missing?

Posted: **12 Aug 2022, 15:09**

Hi,

Thanks for the report, we'll check and get back to you.

Regards

Posted: **12 Aug 2022, 16:49**

Hi,

I've directly copied and pasted your code and the problem is caused by your class modifications.

Just change the wrapper div with the code below, your profile menu will toggle without any problem.

Code: Select all

<div class="min-h-screen flex relative lg:static surface-ground">

Posted: **16 Aug 2022, 07:06**

Hi,

You mean this in the top div? Because I just tested, it correctly toggle, but my issue is that when I click elsewhere, it doesn't closes. Do you have a different behavior with your changes?

Posted: **18 Aug 2022, 08:00**

Some guy(DrekThral) on your discord had the same same issue and found out the solution:

The code you use and the code that you get when you "copy" is not the same:

1) The `relative lg:static` is missing on the top element, like you specify
2) The app-sidebar-2 has a "fixed" class and it should have an "absolute" instead.

I applied those changes and now it works(both in my example and in my real case)

Posted: **31 Aug 2022, 09:14**

Hi,

I'm glad the problem is solved. You can contact again if you have any questions.

Regards.

Prime Community Forum

PrimeBlock Menu not toggling

PrimeBlock Menu not toggling

Re: PrimeBlock Menu not toggling

Re: PrimeBlock Menu not toggling

Re: PrimeBlock Menu not toggling

Re: PrimeBlock Menu not toggling

Re: PrimeBlock Menu not toggling