PrimeBlock Menu not toggling

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Nargzul
Posts: 23
Joined: 21 Apr 2017, 14:30

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?

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

12 Aug 2022, 15:09

Hi,

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

Regards

cetincakiroglu
Posts: 130
Joined: 17 Dec 2021, 09:33

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">

Nargzul
Posts: 23
Joined: 21 Apr 2017, 14:30

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?

Nargzul
Posts: 23
Joined: 21 Apr 2017, 14:30

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)

seymagullu
Posts: 44
Joined: 17 Jun 2022, 09:43

31 Aug 2022, 09:14

Hi,

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

Regards.

Post Reply

Return to “PrimeBlocks for PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests