Skip to content

How to set left sidebar is minimized as default #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
ngoctai opened this issue Jan 10, 2019 · 11 comments
Closed

How to set left sidebar is minimized as default #145

ngoctai opened this issue Jan 10, 2019 · 11 comments
Assignees
@xidedix
Labels
bug

Comments

@ngoctai
Copy link

ngoctai commented Jan 10, 2019

Hi all,
I want to show left sidebar minimized as default. I have tried to add minimized props to AppSidebar element as bellow <AppSidebar fixed minimized>. When i reload page i see it looks good but when i hover the mouse on it, it doesn't show child's menu level.
It's behavior isn't the same when i click on AppSidebarMinimizer element two times (that way works perfectly)

Thank all.
@nithinkashyapn
Copy link

Hey,

In public/index.html

Make body as this i.e., add the following class to it.

<body class="sidebar-minimized">
.
.
.
</body>

- Nithin

@xidedix xidedix added the bug label Feb 21, 2019
@xidedix xidedix self-assigned this Feb 21, 2019
xidedix added a commit to coreui/coreui-react that referenced this issue Feb 21, 2019
@xidedix
fix(Sidebar): How to set left sidebar is minimized as default
0890744 
*How to set left sidebar is minimized as default* [#145](coreui/coreui-free-react-admin-template#145)
- refactor(Layout): LayoutHelper germ
- refactor(Sidabar): use static methods from `LayoutHelper`
- refactor(SidabarMinimizer): use static methods from `LayoutHelper`
@xidedix xidedix mentioned this issue Feb 21, 2019
Merged
@xidedix
Copy link
Member

xidedix commented Feb 21, 2019

Hi @ngoctai, @nithinkashyapn - thanks for pointing this out!

Please update:

  • @coreui/coreui to 2.1.7
  • @coreui/react to 2.1.4
<AppSidebar fixed minimized>
...
</AppSidebar>

From now on minimized should work as expected.

Let us know if this helps.

xidedix added a commit that referenced this issue Feb 21, 2019
@xidedix
Ship v2.1.4
1c65d9e 
- maintenance release: fixes #151 #145
- dependencies update
@xidedix xidedix mentioned this issue Feb 21, 2019
Merged
@nithinkashyapn
Copy link

Thank you.

@xidedix xidedix closed this as completed Feb 25, 2019
@ngoctai
Copy link
Author

ngoctai commented Mar 2, 2019 •
edited
Loading

<body class="sidebar-minimized">...</body>

<AppSidebar fixed minimized> ..</AppSidebar>

Thank you, need to add 2 things for this work.

@xidedix
Copy link
Member

xidedix commented Mar 2, 2019 •
edited
Loading

Hi @ngoctai, thanks for follow-up

it's intended to work without manual adding class sidebar-minimized to body.
what's your browser name/version?

@ngoctai
Copy link
Author

ngoctai commented Mar 2, 2019

Hi @ngoctai, thanks for follow-up

it's intended to work without manual adding class sidebar-minimized to body.
what's your browser name/version?

Yes, you're right. That is my mistake, after clean cache that works perfectly as you said. Thanks a lot.

@fabiandeny
Copy link

Hi @xidedix, thanks for the minimized sidebar.
It's just that when the sidebar is minimized, the badges on sidebar items only show up when it's being hovered. They don't show up otherwise.
In src/_nav.js

...
{
    ...
    badge: {
        variant: 'warning',
        text: 'NEW',
    }
}
...

Is there a way to make them show?
Thanks

@xidedix
Copy link
Member

xidedix commented Jul 2, 2019

Hi @fabiandeny
you can overwrite css rule in src/scss/_custom.scss

.sidebar-minimized .sidebar .nav-dropdown-items .nav-link .badge {
  display: inline;
}

or sth like this

@fabiandeny
Copy link

Thanks @xidedix
Got it working now.
Thanks for the super fast response

@hirocsingh
Copy link

hirocsingh commented Aug 27, 2019 •
edited
Loading

Alright, instead of component which is definitely not user friendly to use since it doesn't allow tooptips. I am using something like following:

<app-header [fixed]="true" [sidebarToggler]="'lg'" [asideMenuToggler]="'lg'"></app-header>

and then

<div class="app-body " > <!-- My Side Bar --> <div class="sidebar "> <nav class="sidebar-nav "></nav> <app-sidebar-minimizer ></app-sidebar-minimizer> </div> <main class="main"></main> <app-aside></app-aside>

Now how do I make the sidebar minimized by default.??

@raselcse13
Copy link

<app-sidebar style="background-color: white;" #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)">

Now how do I make the sidebar minimized by default.??
toggler icon i want to set any here any div ar any span how ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@xidedix xidedix

Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@ngoctai @xidedix @hirocsingh @raselcse13 @nithinkashyapn @fabiandeny