Set fixed width to aside menu

This commit is contained in:
Alejandro Celaya 2020-12-15 17:57:24 +01:00
parent f1f3c3f98b
commit 0491694839
8 changed files with 34 additions and 26 deletions

View file

@ -1,9 +1,8 @@
@import '../utils/base';
@import '../utils/mixins/vertical-align';
$asideMenuMobileWidth: 280px;
.aside-menu {
width: $asideMenuWidth;
background-color: white;
box-shadow: rgba(0, 0, 0, .05) 0 8px 15px;
position: fixed !important;
@ -23,7 +22,6 @@ $asideMenuMobileWidth: 280px;
}
@media (max-width: $smMax) {
width: $asideMenuMobileWidth !important;
transition: left 300ms;
top: $headerHeight - 3px;
box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55);
@ -32,7 +30,7 @@ $asideMenuMobileWidth: 280px;
.aside-menu--hidden {
@media (max-width: $smMax) {
left: -($asideMenuMobileWidth + 35px);
left: -($asideMenuWidth + 35px);
}
}
@ -45,6 +43,10 @@ $asideMenuMobileWidth: 280px;
margin: 0 -15px;
text-decoration: none !important;
cursor: pointer;
@media (max-width: $smMax) {
margin: 0;
}
}
.aside-menu__item:hover {

View file

@ -22,7 +22,6 @@ export interface AsideMenuProps {
interface AsideMenuItemProps extends NavLinkProps {
to: string;
className?: string;
}
const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
@ -37,10 +36,10 @@ const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...res
);
const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
{ selectedServer, className, showOnMobile = false }: AsideMenuProps,
{ selectedServer, showOnMobile = false }: AsideMenuProps,
) => {
const serverId = selectedServer ? selectedServer.id : '';
const asideClass = classNames('aside-menu', className, {
const asideClass = classNames('aside-menu', {
'aside-menu--hidden': !showOnMobile,
});
const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;

View file

@ -33,11 +33,11 @@
color: white;
}
.menu-layout__container {
.menu-layout__container.menu-layout__container {
padding: 20px 0 0;
min-height: 100%;
@media (min-width: $mdMin) {
padding: 30px 15px 0;
padding: 30px 0 0 $asideMenuWidth;
}
}

View file

@ -56,10 +56,10 @@ const MenuLayout = (
<FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
<div {...swipeableProps} className="menu-layout__swipeable">
<div className="row menu-layout__swipeable-inner">
<AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
<div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
<div className="menu-layout__container container-xl">
<div className="menu-layout__swipeable-inner">
<AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
<div className="menu-layout__container" onClick={() => hideSidebar()}>
<div className="container-xl">
<Switch>
<Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
<Route exact path="/server/:serverId/overview" component={Overview} />

View file

@ -0,0 +1,9 @@
@import '../utils/base';
.shlink-versions-container--with-server {
margin-left: 0;
@media (min-width: $mdMin) {
margin-left: $asideMenuWidth;
}
}

View file

@ -1,23 +1,20 @@
import classNames from 'classnames';
import { isReachableServer, SelectedServer } from '../servers/data';
import ShlinkVersions from './ShlinkVersions';
import './ShlinkVersionsContainer.scss';
export interface ShlinkVersionsContainerProps {
selectedServer: SelectedServer;
}
const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => {
const serverIsReachable = isReachableServer(selectedServer);
const colClasses = classNames('text-center', {
'col-12': !serverIsReachable,
'col-lg-10 offset-lg-2 col-md-9 offset-md-3': serverIsReachable,
const classes = classNames('text-center', {
'shlink-versions-container--with-server': isReachableServer(selectedServer),
});
return (
<div className="row">
<div className={colClasses}>
<ShlinkVersions selectedServer={selectedServer} />
</div>
<div className={classes}>
<ShlinkVersions selectedServer={selectedServer} />
</div>
);
};

View file

@ -17,6 +17,7 @@ $mediumGrey: #dee2e6;
// Misc
$headerHeight: 57px;
$asideMenuWidth: 260px;
$footer-height: 2.3rem;
$footer-margin: .8rem;

View file

@ -15,13 +15,13 @@ describe('<ShlinkVersionsContainer />', () => {
afterEach(() => wrapper?.unmount());
test.each([
[ null, 'col-12' ],
[ Mock.of<NotFoundServer>({ serverNotFound: true }), 'col-12' ],
[ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'col-12' ],
[ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'col-lg-10 offset-lg-2 col-md-9 offset-md-3' ],
[ null, 'text-center' ],
[ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ],
[ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ],
[ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'text-center shlink-versions-container--with-server' ],
])('renders proper col classes based on type of selected server', (selectedServer, expectedClasses) => {
const wrapper = createWrapper(selectedServer);
expect(wrapper.find('div').at(1).prop('className')).toEqual(`text-center ${expectedClasses}`);
expect(wrapper.find('div').prop('className')).toEqual(`${expectedClasses}`);
});
});