Set fixed width to aside menu

src/common/AsideMenu.scss

@@ -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 {

src/common/AsideMenu.tsx

@@ -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;

src/common/MenuLayout.scss

@@ -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;
   }
 }

src/common/MenuLayout.tsx

@@ -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">
+        <div className="menu-layout__swipeable-inner">
-          <AsideMenu className="col-lg-2 col-md-3" selectedServer={selectedServer} showOnMobile={sidebarVisible} />
+          <AsideMenu 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" onClick={() => hideSidebar()}>
-            <div className="menu-layout__container container-xl">
+            <div className="container-xl">
               <Switch>
                 <Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
                 <Route exact path="/server/:serverId/overview" component={Overview} />

src/common/ShlinkVersionsContainer.scss

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

src/common/ShlinkVersionsContainer.tsx

@@ -1,24 +1,21 @@
 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 classes = classNames('text-center', {
-  const colClasses = classNames('text-center', {
+    'shlink-versions-container--with-server': isReachableServer(selectedServer),
-    'col-12': !serverIsReachable,
-    'col-lg-10 offset-lg-2 col-md-9 offset-md-3': serverIsReachable,
   });
 
   return (
-    <div className="row">
+    <div className={classes}>
-      <div className={colClasses}>
       <ShlinkVersions selectedServer={selectedServer} />
     </div>
-    </div>
   );
 };
 

src/utils/base.scss

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

test/common/ShlinkVersionsContainer.test.tsx

@@ -15,13 +15,13 @@ describe('<ShlinkVersionsContainer />', () => {
   afterEach(() => wrapper?.unmount());
 
   test.each([
-    [ null, 'col-12' ],
+    [ null, 'text-center' ],
-    [ Mock.of<NotFoundServer>({ serverNotFound: true }), 'col-12' ],
+    [ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ],
-    [ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'col-12' ],
+    [ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ],
-    [ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'col-lg-10 offset-lg-2 col-md-9 offset-md-3' ],
+    [ 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}`);
   });
 });