diff --git a/src/layouts/main/components/sidebar/GuestIndicator.scss b/src/layouts/main/components/sidebar/GuestIndicator.scss new file mode 100644 index 0000000..1b675b4 --- /dev/null +++ b/src/layouts/main/components/sidebar/GuestIndicator.scss @@ -0,0 +1,13 @@ +@import "~scss/variables"; + +.nav-guest-indicator { + background-color: $gray-200; + + padding: 0.5rem 1rem; + + border-bottom: 1px solid $border-color; + + color: $text-muted; + text-align: center; + font-size: 85%; +} diff --git a/src/layouts/main/components/sidebar/GuestIndicator.tsx b/src/layouts/main/components/sidebar/GuestIndicator.tsx new file mode 100644 index 0000000..add9c81 --- /dev/null +++ b/src/layouts/main/components/sidebar/GuestIndicator.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +import "./GuestIndicator.scss"; + +export const GuestIndicator: React.FC = () => ( +
Browsing as guest
+); diff --git a/src/layouts/main/components/sidebar/index.tsx b/src/layouts/main/components/sidebar/index.tsx index ab03eac..200d72d 100644 --- a/src/layouts/main/components/sidebar/index.tsx +++ b/src/layouts/main/components/sidebar/index.tsx @@ -4,6 +4,7 @@ import { WalletManager } from "@app/WalletManager"; +import { GuestIndicator } from "./GuestIndicator"; import { TotalBalance } from "./TotalBalance"; import { SidebarItem } from "./SidebarItem"; import { Footer } from "./Footer"; @@ -16,12 +17,20 @@ export const MainSidebar: React.FC = (props: Props): JSX.Element => (