Initial expanded view in details.

components/Settings.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
 import WebsiteSettings from './WebsiteSettings';
@@ -8,21 +8,16 @@ import { useSelector } from 'react-redux';
 
 export default function Settings() {
   const user = useSelector(state => state.user);
+  const [option, setOption] = useState('Websites');
 
   const menuOptions = ['Websites', user.is_admin && 'Accounts', 'Profile'];
 
   return (
     <Page>
-      <MenuLayout menu={menuOptions} selectedOption="Websites">
+      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
-        {option => {
+        {option === 'Websites' && <WebsiteSettings />}
-          if (option === 'Websites') {
+        {option === 'Accounts' && <AccountSettings />}
-            return <WebsiteSettings />;
+        {option === 'Profile' && <ProfileSettings />}
-          } else if (option === 'Accounts') {
-            return <AccountSettings />;
-          } else if (option === 'Profile') {
-            return <ProfileSettings />;
-          }
-        }}
       </MenuLayout>
     </Page>
   );

components/WebsiteDetails.js

@@ -9,15 +9,18 @@ import { get } from 'lib/web';
 import { browserFilter, urlFilter, refFilter, deviceFilter, countryFilter } from 'lib/filters';
 import styles from './WebsiteDetails.module.css';
 import PageHeader from './layout/PageHeader';
+import MenuLayout from './layout/MenuLayout';
 
 const pageviewClasses = 'col-md-12 col-lg-6';
 const sessionClasses = 'col-12 col-lg-4';
+const menuOptions = ['Pages', 'Referrers', 'Browsers', 'Operating system', 'Devices', 'Countries'];
 
 export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' }) {
   const [data, setData] = useState();
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
+  const [expand, setExpand] = useState();
   const { startDate, endDate } = dateRange;
 
   async function loadData() {
@@ -32,6 +35,14 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
     setTimeout(() => setDateRange(values), 300);
   }
 
+  function handleExpand(title) {
+    setExpand(title);
+  }
+
+  function handleMenuSelect(title) {
+    setExpand(title);
+  }
+
   useEffect(() => {
     if (websiteId) {
       loadData();
@@ -55,7 +66,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
           />
         </div>
       </div>
-      {chartLoaded && (
+      {chartLoaded && !expand && (
         <>
           <div className={classNames(styles.row, 'row')}>
             <div className={pageviewClasses}>
@@ -67,6 +78,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={urlFilter}
+                onExpand={handleExpand}
               />
             </div>
             <div className={pageviewClasses}>
@@ -78,6 +90,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={refFilter(data.domain)}
+                onExpand={handleExpand}
               />
             </div>
           </div>
@@ -91,6 +104,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={browserFilter}
+                onExpand={handleExpand}
               />
             </div>
             <div className={sessionClasses}>
@@ -101,6 +115,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 websiteId={websiteId}
                 startDate={startDate}
                 endDate={endDate}
+                onExpand={handleExpand}
               />
             </div>
             <div className={sessionClasses}>
@@ -112,6 +127,7 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 startDate={startDate}
                 endDate={endDate}
                 dataFilter={deviceFilter}
+                onExpand={handleExpand}
               />
             </div>
           </div>
@@ -129,11 +145,21 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
                 endDate={endDate}
                 dataFilter={countryFilter}
                 onDataLoad={data => setCountryData(data)}
+                onExpand={handleExpand}
               />
             </div>
           </div>
         </>
       )}
+      {expand && (
+        <MenuLayout
+          className={styles.expand}
+          menuClassName={styles.menu}
+          menu={menuOptions}
+          selectedOption={expand}
+          onMenuSelect={handleMenuSelect}
+        />
+      )}
     </Page>
   );
 }

components/WebsiteDetails.module.css

@@ -2,6 +2,14 @@
   margin-bottom: 30px;
 }
 
+.expand {
+  border-top: 1px solid var(--gray300);
+}
+
+.menu {
+  font-size: var(--font-size-small);
+}
+
 .row {
   border-top: 1px solid var(--gray300);
   min-height: 430px;

components/WebsiteList.js

@@ -27,6 +27,7 @@ export default function WebsiteList() {
       {data?.map(({ website_id, name }) => (
         <div key={website_id} className={styles.website}>
           <PageHeader>
+            <div>
               <Link
                 href="/website/[...id]"
                 as={`/website/${website_id}/${name}`}
@@ -34,6 +35,7 @@ export default function WebsiteList() {
               >
                 {name}
               </Link>
+            </div>
             <Button
               icon={<Arrow />}
               onClick={() =>

components/charts/QuickButtons.module.css

@@ -1,5 +1,6 @@
 .buttons {
   display: flex;
+  align-content: center;
   position: absolute;
   top: 0;
   right: 0;
@@ -10,7 +11,7 @@
   margin-left: 10px;
 }
 
-.button {
+.buttons .button {
   font-size: var(--font-size-xsmall);
   padding: 4px 8px;
 }

components/charts/RankingsChart.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { useSpring, animated, config } from 'react-spring';
 import classNames from 'classnames';
-import CheckVisible from '../helpers/CheckVisible';
+import CheckVisible from 'components/helpers/CheckVisible';
+import Button from 'components/common/Button';
+import Arrow from 'assets/arrow-right.svg';
 import { get } from 'lib/web';
 import { percentFilter } from 'lib/filters';
 import styles from './RankingsChart.module.css';
@@ -16,6 +18,7 @@ export default function RankingsChart({
   className,
   dataFilter,
   onDataLoad = () => {},
+  onExpand = () => {},
 }) {
   const [data, setData] = useState();
 
@@ -62,6 +65,11 @@ export default function RankingsChart({
               <Row key={x} label={x} value={y} percent={z} animate={visible} />
             ))}
           </div>
+          <div className={styles.footer}>
+            <Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(title)}>
+              <div>More</div>
+            </Button>
+          </div>
         </div>
       )}
     </CheckVisible>

components/charts/RankingsChart.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  min-height: 430px;
+  min-height: 460px;
   font-size: var(--font-size-small);
   padding: 20px 0;
   display: flex;
@@ -90,6 +90,11 @@
   transform: translate(-50%, -50%);
 }
 
+.footer {
+  display: flex;
+  justify-content: center;
+}
+
 @media only screen and (max-width: 992px) {
   .container {
     min-height: auto;

components/common/Button.js

@@ -16,8 +16,9 @@ export default function Button({
     <button
       type={type}
       className={classNames(styles.button, className, {
-        [styles.small]: size === 'small',
         [styles.large]: size === 'large',
+        [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
         [styles.action]: variant === 'action',
         [styles.danger]: variant === 'danger',
       })}

components/common/Button.module.css

@@ -20,12 +20,20 @@
   margin-left: 10px;
 }
 
+.large {
+  font-size: var(--font-size-large);
+}
+
+.medium {
+  font-size: var(--font-size-normal);
+}
+
 .small {
   font-size: var(--font-size-small);
 }
 
-.large {
+.xsmall {
-  font-size: var(--font-size-large);
+  font-size: var(--font-size-xsmall);
 }
 
 .action {

components/common/Icon.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './Icon.module.css';
 
-export default function Icon({ icon, className, size = 'M' }) {
+export default function Icon({ icon, className, size = 'medium' }) {
   return (
     <div
       className={classNames(styles.icon, className, {
@@ -10,6 +10,7 @@ export default function Icon({ icon, className, size = 'M' }) {
         [styles.large]: size === 'large',
         [styles.medium]: size === 'medium',
         [styles.small]: size === 'small',
+        [styles.xsmall]: size === 'xsmall',
       })}
     >
       {icon}

components/common/Icon.module.css

@@ -32,3 +32,8 @@
   width: 12px;
   height: 12px;
 }
+
+.xsmall > svg {
+  width: 10px;
+  height: 10px;
+}

components/layout/MenuLayout.js

@@ -2,26 +2,34 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import styles from './MenuLayout.module.css';
 
-export default function MenuLayout({ menu, selectedOption, onMenuSelect, children }) {
+export default function MenuLayout({
-  const [option, setOption] = useState(selectedOption);
+  menu,
+  selectedOption,
+  onMenuSelect,
+  className,
+  menuClassName,
+  contentClassName,
+  children,
+}) {
+  function handleMenuSelect(option) {
+    onMenuSelect(option);
+  }
 
   return (
-    <div className={styles.container}>
+    <div className={classNames(styles.container, className)}>
-      <div className={styles.menu}>
+      <div className={classNames(styles.menu, menuClassName)}>
-        {menu.map(item =>
+        {menu.map(option =>
-          item ? (
+          option ? (
             <div
-              className={classNames(styles.option, { [styles.active]: option === item })}
+              className={classNames(styles.option, { [styles.active]: option === selectedOption })}
-              onClick={() => setOption(item)}
+              onClick={() => handleMenuSelect(option)}
             >
-              {item}
+              {option}
             </div>
           ) : null,
         )}
       </div>
-      <div className={styles.content}>
+      <div className={classNames(styles.content, contentClassName)}>{children}</div>
-        {typeof children === 'function' ? children(option) : children}
-      </div>
     </div>
   );
 }

components/layout/MenuLayout.module.css

@@ -20,7 +20,7 @@
 .option {
   padding: 8px 16px;
   cursor: pointer;
-  min-width: 140px;
+  min-width: 160px;
   margin-right: 30px;
   border-radius: 4px;
 }

components/layout/PageHeader.module.css

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  align-content: center;
   line-height: 80px;
   font-size: var(--font-size-large);
 }