clean up side navigation

ui/component/channelDiscussion/view.jsx

@@ -10,7 +10,7 @@ type Props = {
 function ChannelDiscussion(props: Props) {
   const uri = props.uri;
   return (
-    <div className="">
+    <div>
       <section className="section">
         <CommentCreate uri={uri} />
       </section>

ui/component/header/index.js

@@ -23,6 +23,7 @@ const perform = dispatch => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   signOut: () => dispatch(doSignOut()),
   openMobileNavigation: () => dispatch(doOpenModal(MODALS.MOBILE_NAVIGATION)),
+  openChannelCreate: () => dispatch(doOpenModal(MODALS.CREATE_CHANNEL)),
 });
 
 export default connect(

ui/component/header/view.jsx

@@ -28,6 +28,7 @@ type Props = {
   syncError: ?string,
   signOut: () => void,
   openMobileNavigation: () => void,
+  openChannelCreate: () => void,
 };
 
 const Header = (props: Props) => {
@@ -43,6 +44,7 @@ const Header = (props: Props) => {
     signOut,
     syncError,
     openMobileNavigation,
+    openChannelCreate,
   } = props;
   const authenticated = Boolean(email);
 
@@ -142,11 +144,11 @@ const Header = (props: Props) => {
                     <Icon size={18} icon={ICONS.PUBLISH} />
                   </MenuButton>
                   <MenuList className="menu__list--header">
-                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
-                      <Icon aria-hidden tootlip icon={ICONS.PUBLISH} />
+                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
+                      <Icon aria-hidden icon={ICONS.PUBLISH} />
                       {__('New Publish')}
                     </MenuItem>
-                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
+                    <MenuItem className="menu__link" onSelect={openChannelCreate}>
                       <Icon aria-hidden icon={ICONS.CHANNEL} />
                       {__('New Channel')}
                     </MenuItem>

ui/component/sideNavigation/view.jsx

@@ -7,6 +7,10 @@ import Button from 'component/button';
 import Tag from 'component/tag';
 import StickyBox from 'react-sticky-box/dist/esnext';
 import Spinner from 'component/spinner';
+import usePersistedState from 'effects/use-persisted-state';
+
+const SHOW_CHANNELS = 'SHOW_CHANNELS';
+const SHOW_TAGS = 'SHOW_TAGS';
 
 type Props = {
   subscriptions: Array<Subscription>,
@@ -34,6 +38,31 @@ function SideNavigation(props: Props) {
   } = props;
   const { pathname } = location;
   const isAuthenticated = Boolean(email);
+  const [sideInformation, setSideInformation] = usePersistedState(
+    'side-navigation:information',
+    getSideInformation(pathname)
+  );
+
+  function getSideInformation(path) {
+    switch (path) {
+      case `/$/${PAGES.CHANNELS_FOLLOWING}`:
+        return SHOW_CHANNELS;
+
+      case `/$/${PAGES.TAGS_FOLLOWING}`:
+        return SHOW_TAGS;
+
+      case `/$/${PAGES.DISCOVER}`:
+        return null;
+
+      default:
+        return sideInformation;
+    }
+  }
+
+  React.useEffect(() => {
+    const sideInfo = getSideInformation(pathname);
+    setSideInformation(sideInfo);
+  }, [pathname, setSideInformation]);
 
   function buildLink(path, label, icon, onClick) {
     return {
@@ -138,7 +167,7 @@ function SideNavigation(props: Props) {
             )}
         </ul>
 
-        {pathname.includes(PAGES.TAGS_FOLLOWING) && (
+        {sideInformation === SHOW_TAGS && (
           <ul className="navigation__secondary navigation-links--small tags--vertical">
             {followedTags.map(({ name }, key) => (
               <li className="navigation-link__wrapper" key={name}>
@@ -148,7 +177,7 @@ function SideNavigation(props: Props) {
           </ul>
         )}
 
-        {pathname.includes(PAGES.CHANNELS_FOLLOWING) && (
+        {sideInformation === SHOW_CHANNELS && (
           <ul className="navigation__secondary navigation-links--small">
             {subscriptions.map(({ uri, channelName }, index) => (
               <li key={uri} className="navigation-link__wrapper">

ui/scss/component/_button.scss

@@ -88,6 +88,7 @@ svg + .button__label,
   &:last-of-type {
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
+    margin-right: var(--spacing-small);
   }
 }
 

ui/scss/component/_claim-list.scss

@@ -23,11 +23,8 @@
 
 .claim-list__dropdown {
   padding: 0 var(--spacing-medium);
-  margin-left: var(--spacing-medium);
-  margin-right: var(--spacing-medium);
 
   @media (max-width: $breakpoint-small) {
-    margin-top: var(--spacing-small);
     margin-left: 0;
   }
 }