Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: show scrollbar in navigation menu

Browse Source
This commit is contained in:
thecodrr
2022-02-09 08:00:39 +05:00
parent b58f1e7cd4
commit afa260b50c
1 changed files with 89 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
apps/web/src/components/navigation-menu/index.js
View File

@@ -27,6 +27,7 @@ import { useStore as useAppStore } from "../../stores/app-store";
import { useStore as useUserStore } from "../../stores/user-store";
import { useStore as useThemeStore } from "../../stores/theme-store";
import useLocation from "../../hooks/use-location";
import { FlexScrollContainer } from "../scroll-container";
function shouldSelectNavItem(route, pin) {
if (pin.type === "notebook") {
@@ -126,96 +127,96 @@ function NavigationMenu(props) {
bg={"bgSecondary"}
px={0}
>
<Flex
flexDirection="column"
sx={{
overflow: "scroll",
scrollbarWidth: "none",
"::-webkit-scrollbar": { width: 0, height: 0 },
msOverflowStyle: "none",
}}
>
{routes.map((item) => (
<NavigationItem
key={item.path}
title={item.title}
icon={item.icon}
isNew={item.isNew}
selected={
item.path === "/"
? location === item.path
: location.startsWith(item.path)
}
onClick={() => {
if (!isMobile && location === item.path)
return toggleNavigationContainer();
_navigate(item.path);
}}
/>
))}
{colors.map((color) => (
<NavigationItem
key={color.id}
title={db.colors.alias(color.id)}
icon={Circle}
selected={location === `/colors/${color.id}`}
color={color.title.toLowerCase()}
onClick={() => {
_navigate(`/colors/${color.id}`);
}}
menu={{
items: [
{
key: "rename",
title: () => "Rename color",
onClick: async ({ color }) => {
await showRenameColorDialog(color.id);
},
},
],
extraData: { color },
}}
/>
))}
<Box width="85%" height="0.8px" bg="border" alignSelf="center" my={1} />
{pins.map((pin) => (
<NavigationItem
key={pin.id}
title={pin.type === "tag" ? db.tags.alias(pin.id) : pin.title}
menu={{
items: [
{
key: "removeshortcut",
title: () => "Remove shortcut",
onClick: async ({ pin }) => {
await db.settings.unpin(pin.id);
refreshNavItems();
},
},
],
extraData: { pin },
}}
icon={
pin.type === "notebook"
? Notebook2
: pin.type === "tag"
? Tag2
: Topic
}
isShortcut
selected={shouldSelectNavItem(location, pin)}
onClick={() => {
if (pin.type === "notebook") {
_navigate(`/notebooks/${pin.id}`);
} else if (pin.type === "topic") {
_navigate(`/notebooks/${pin.notebookId}/${pin.id}`);
} else if (pin.type === "tag") {
_navigate(`/tags/${pin.id}`);
<FlexScrollContainer>
<Flex flexDirection="column">
{routes.map((item) => (
<NavigationItem
key={item.path}
title={item.title}
icon={item.icon}
isNew={item.isNew}
selected={
item.path === "/"
? location === item.path
: location.startsWith(item.path)
}
}}
onClick={() => {
if (!isMobile && location === item.path)
return toggleNavigationContainer();
_navigate(item.path);
}}
/>
))}
{colors.map((color) => (
<NavigationItem
key={color.id}
title={db.colors.alias(color.id)}
icon={Circle}
selected={location === `/colors/${color.id}`}
color={color.title.toLowerCase()}
onClick={() => {
_navigate(`/colors/${color.id}`);
}}
menu={{
items: [
{
key: "rename",
title: () => "Rename color",
onClick: async ({ color }) => {
await showRenameColorDialog(color.id);
},
},
],
extraData: { color },
}}
/>
))}
<Box
width="85%"
height="0.8px"
bg="border"
alignSelf="center"
my={1}
/>
))}
</Flex>
{pins.map((pin) => (
<NavigationItem
key={pin.id}
title={pin.type === "tag" ? db.tags.alias(pin.id) : pin.title}
menu={{
items: [
{
key: "removeshortcut",
title: () => "Remove shortcut",
onClick: async ({ pin }) => {
await db.settings.unpin(pin.id);
refreshNavItems();
},
},
],
extraData: { pin },
}}
icon={
pin.type === "notebook"
? Notebook2
: pin.type === "tag"
? Tag2
: Topic
}
isShortcut
selected={shouldSelectNavItem(location, pin)}
onClick={() => {
if (pin.type === "notebook") {
_navigate(`/notebooks/${pin.id}`);
} else if (pin.type === "topic") {
_navigate(`/notebooks/${pin.notebookId}/${pin.id}`);
} else if (pin.type === "tag") {
_navigate(`/tags/${pin.id}`);
}
}}
/>
))}
</Flex>
</FlexScrollContainer>
<Flex flexDirection="column">
{theme === "light" ? (
<NavigationItem