mirror of
https://github.com/irislib/iris-messenger.git
synced 2024-10-18 14:13:21 +00:00
mobile menu styles
This commit is contained in:
parent
d5fdaaf7e5
commit
12d2bf72b7
@ -73,7 +73,7 @@ class ChatList extends BaseComponent<ChatListProps, ChatListState> {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
className={`h-screen overflow-x-hidden overflow-y-scroll w-64 ${
|
className={`h-screen overflow-x-hidden overflow-y-scroll px-2 md:px-0 w-full md:w-64 ${
|
||||||
this.props.className || ''
|
this.props.className || ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import Header from '../../components/Header';
|
import Header from '../../components/Header';
|
||||||
import Icons from '../../Icons';
|
|
||||||
|
|
||||||
import SettingsContent from './SettingsContent';
|
import SettingsContent from './SettingsContent';
|
||||||
import SettingsMenu from './SettingsMenu';
|
import SettingsMenu from './SettingsMenu';
|
||||||
@ -10,17 +9,9 @@ const Settings = (props: Props) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header />
|
<Header />
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row px-2 md:px-0">
|
||||||
<div className={props.page ? 'flex md:hidden' : 'hidden'}>
|
|
||||||
<a href="/settings">
|
|
||||||
<span>{Icons.backArrow}</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<SettingsMenu activePage={props.page} />
|
<SettingsMenu activePage={props.page} />
|
||||||
<div
|
<div className={props.page ? '' : 'hidden md:flex'}>
|
||||||
className={props.page ? '' : 'hidden-xs'}
|
|
||||||
style="padding: 0px 15px; overflow: auto; width: 100%;"
|
|
||||||
>
|
|
||||||
<SettingsContent id={props.page} />
|
<SettingsContent id={props.page} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +33,7 @@ export default class SettingsMenu extends Component {
|
|||||||
const activePage = this.props.activePage || 'account';
|
const activePage = this.props.activePage || 'account';
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`flex-col w-48 flex-shrink-0 ${
|
className={`flex-col w-full md:w-48 flex-shrink-0 ${
|
||||||
!this.props.activePage ? 'flex' : 'hidden md:flex'
|
!this.props.activePage ? 'flex' : 'hidden md:flex'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user