Merge pull request #43 from the-collab-lab/sa-switch-token

Create switch list button
the-collab-lab · May 25, 2023 · 23754d6 · 23754d6
2 parents baf4f3d + bb7b777
commit 23754d6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/src/index.css b/src/index.css
@@ -99,6 +99,23 @@ button:focus-visible {
  font-weight: bold;
 }
 
+.switch-btn {
+ background: none;
+ margin-top: 0;
+ text-transform: none;
+ color: var(--color-text);
+ font-family: Poppins, arial, sans-serif;
+ font-size: 1.45em;
+ flex: 0 1 auto;
+ padding: 0.8rem;
+ text-align: center;
+ text-decoration: none;
+ outline: none;
+}
+.switch-btn:hover {
+ background-color: initial;
+}
+
 input[type='text'] {
  border: 2px solid var(--color-accent-primary);
  border-radius: 7px;

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -4,11 +4,18 @@ import './Layout.css';
 import { DarkMode } from '../components/DarkModeToggle';
 
 export function Layout({ token }) {
+
+ const handleSwitchToken = () => {
+ localStorage.removeItem('tcl-shopping-list-token');
+ window.location.replace('/');
+ }
+
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');
  const [isChecked, setChecked] = useState(prefersDarkMode.matches);
  const onChange = () => {
  setChecked((prevChecked) => !prevChecked);
  };
+
  return (
  <>
  <div className="Layout" id={isChecked ? 'theme-dark' : 'theme-light'}>
@@ -22,19 +29,23 @@ export function Layout({ token }) {
  <Outlet />
  </main>
  <nav className="Nav">
- <NavLink to="/" className="Nav-link">
- Home
- </NavLink>
  {token ? (
  <>
+ <button className="switch-btn" onClick={handleSwitchToken}>
+ Switch List
+ </button>
  <NavLink to="/list" className="Nav-link">
  List
  </NavLink>
  <NavLink to="/add-item" className="Nav-link">
  Add Item
  </NavLink>
  </>
- ) : null}
+ ) : (
+ <NavLink to="/" className="Nav-link">
+ Home
+ </NavLink>
+ )}
  </nav>
  </div>
  </>