have sidebar be collapsed by default

[xcesiv]

Hi,

Trying to set the default collapsed state of the sidebar in a fresh clone of the latest ant-design-pro to true instead of false. and can't seem to find a clear answer in the documentation or figure out the solution myself. I thought maybe it would be in config/defaultSettings.ts, but can't seem to find anything. Tried playing around with it and read the documentation of ant-deisng-pro-layout but there it says the default for collapsed is already true but the menu is open when i launch it.

Any help would be greatly appreicated.

Thanks

[boukmi]

I think ant-pro team only answers to issues in chinese, all the issues I have opened have never been answered.
I'll maybe use another framework, english support almost doesn't exist

[xcesiv]

I think ant-pro team only answers to issues in chinese, all the issues I have opened have never been answered.
I'll maybe use another framework, english support almost doesn't exist

I've had some success getting answers from the ant-design team in english on their Gitter, but I have noticed that i've gotten much fewer replies for Ant Design Pro. I stil really like the framework and maybe once more english speakers use it they'll be open to having us as collaberators to allieviate that. I don't think giving up on Ant Design Pro because of a sidebar being collapsed or not is good enough justification. Otherwise the english docs and what have you have been sufficent enough. Ty though.

[boukmi]

Yeah You’re right, I was getting some answers for ant-design too but none for ant-design-pro. I’ll maybe try their Gitter that you mentioned.
Sorry i cannot help you with your issue and if you can help me with mine that would be very appreciated
Have you ever used redux form with the new ant-design-pro? I couldn’t figure out how to add the form reducer using dva!

Have a good one

[chenshuai2144]

@xcesiv https://ant.design/components/layout/#Layout.Sider

We use antd's Layout.Sider, which will automatically trigger onCollapsed based on the screen size.

[xcesiv]

@chenshuai2144 so are you saying there isn't a way to initially load with the SiderMenu collapsed? Have been trying to do so for an application I'm building using ant-design-pro. I'm not asking about onCollapse I don't think. I think I'm asking about collapsed or inlineCollapsed perhaps? Simply put, I'm trying to default it inversely of how ant-design-pro does out of the box. I want this to be the default layout:

I've dug through the documentation of Layout.Sider, Sider.Menu, and ant-design in general. I can make this happen using just ant-design, but within ant-design-pro, I can't.

Is there a way using Pro to have the Sider initially laod like the image? Thanks for the reply and any help!

[boukmi]

Did you manage to have the side bar initially collapsed?

[xcesiv]

@Bouki

Did you manage to have the side bar initially collapsed?

i have not with ant-design-pro. I believe you need to edit ant-design-pro-layout to acheive this? I wish I knew more

[chenshuai2144]

@xcesiv you need set trigger={null} ，you can try adding in the layout, I am not sure if it will pass through to the side

[dpetrov]

Currently you can define collapsed: false into the defaultSettings.js and the sidebar will be collapsed by default. However, after the handleMenuCollapse is triggered, the sidebar remains collapsed.

@chenshuai2144 would you probably have an idea, why it would remain collapsed?

[martin-liu]

@chenshuai2144
What @dpetrov said seems still true after one year.
I'm trying antd pro v5 now, when set collapsed, then it will be in fixed state, no way to trigger again. defaultCollapsed also not work.

The ask is to support default collapsed, but still be able to trigger the collapse when click the button.

Can you help check on it? Thank you very much!

[VaVoose]

I think I may have figured out this issue. To start I am using Ant Design integrated with Vue. The default trigger event checks to see if the sidebar is collapsed by default and if it is it automatically opens it. So we need to check if the trigger is looking for the first time and block the change Here is my sample code:

<a-layout-sider collapsible breakpoint="md" :collapsed="c" :collapsed-width="collapsedWidth" @collapse="triggerCollapse" @breakpoint="onBreakpoint" :zeroWidthTriggerStyle='sidebarIconStyle' >

data () { return { c: true, firstCollapse: true, //One way flag for sidebar collapse state } }

triggerCollapse(){ if(this.firstCollapse){ this.firstCollapse = false; return; } this.c = !this.c; },

I hope this helps

[zhangyongjiang]

In the BasicLayout.tsx, dispatch an event

  useEffect(() => {
    if (dispatch) {
>>>      dispatch({
>>>        type: 'global/changeLayoutCollapsed',
>>>        true,
>>>      });
      dispatch({
        type: 'user/fetchCurrent',
      });
    }
  }, []);