Home and Settings components

client/src/components/Settings/Settings.module.css

@@ -0,0 +1,31 @@
+.Settings {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+.SettingsNav {
+  /* background-color: coral; */
+  display: flex;
+  flex-direction: column;
+}
+
+.SettingsNavLink {
+  padding-left: 7px;
+  border-left: 3px solid transparent;
+  display: flex;
+  align-items: center;
+  height: 40px;
+}
+
+.SettingsNavLink:hover {
+  border-left: 3px solid var(--color-primary);
+}
+
+.SettingsNavLinkActive {
+  border-left: 3px solid var(--color-primary);
+}
+
+.SettingsContent {
+  /* background-color:springgreen; */
+}

client/src/components/Settings/Settings.tsx

@@ -1,15 +1,48 @@
-import { Link } from 'react-router-dom';
+import { NavLink, Link, Switch, Route, withRouter, match } from 'react-router-dom';
 
+import classes from './Settings.module.css';
+
+import { Container } from '../UI/Layout/Layout';
+import Headline from '../UI/Headlines/Headline/Headline';
 import Themer from '../Themer/Themer';
 
-const Settings = (): JSX.Element => {
+interface ComponentProps {
+  match: match;
+}
+
+const Settings = (props: ComponentProps): JSX.Element => {
   return (
-    <div>
-      <h1>settings</h1>
-      <Link to='/'>Home</Link>
-      <Themer />
-    </div>
+    <Container>
+      <Headline
+        title='Settings'
+        subtitle={<Link to='/'>Go back</Link>}
+      />
+      <div className={classes.Settings}>
+        <nav className={classes.SettingsNav}>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings'>
+            Theme
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/nothig'>
+            Nothing
+          </NavLink>
+        </nav>
+        <section className={classes.SettingsContent}>
+          {/* <Themer /> */}
+          <Switch>
+            <Route exact path='/settings' component={Themer} />
+          </Switch>
+        </section>
+      </div>
+    </Container>
   )
 }
 
-export default Settings;
+export default withRouter(Settings);